我用 eXist-db 编写了一个网络应用程序基于 XML technologies (XForms, XQuery) 我使用 Bootstrap用于 GUI。
我的问题是，当其中一个表格单元格中包含的文本太长时，尤其是第一列与第二列重叠，显示分辨率不方便。
为此我使用了 overflow-y和 overflow-x属性，但似乎 Bootstrap对此不感兴趣。列的宽度不是滚动条，而是扩展到与第二列重叠的程度
我的第二个问题是无法以百分比指定高度，因为当表格中显示的数据过多时，列的高度会超出显示的高度。
此外，在这种情况下，我希望该列始终扩展显示高度的 100%(不多不少)，如果此表中有更多数据，则滚动条应该发挥作用，但在这种情况下它们也不起作用.
这是我的代码片段:
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Personenübersicht</h3>
<div style="height: 685px; width: 100%; overflow-y: scroll; overflow-x: scroll;">
<table class="table table-hover" data-sort-order="desc">
<thead>
<tr>
<th width="15%"/>
<th data-field="lfdNr" width="15%" data-sortable="true">Lfd. Nr.</th>
<th data-field="name" width="40%" data-sortable="true">Name</th>
<th data-field="aktiverNutzer" width="30%" data-sortable="true">aktiver Nutzer</th>
</tr>
</thead>
<tbody id="person-repeat" xf:repeat-nodeset="//person">
<tr>
<td>
Content
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref1"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref2"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref3"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Details</h3>
<div style="height: 700px; width: 100%; overflow-y: scroll; overflow-x: scroll;">
<table class="table table-striped">
<tr>
<td>
<b>Name:</b>
</td>
<td>
<xf:output ref="//person[index('person-repeat')]/name"/>
</td>
</tr>
<tr>
...
</tr>
...
</table>
</div>
</div>
</div>
<!-- Bereich: Aktionsübersicht einer einzelnen person -->
<div class="col-md-4">
<div class="orderListRepeat">
<h3>Process</h3>
<div style="height: 100%; width: 100%;">
<table class="table table-hover">
<thead>
<th width="5%"/>
<th width="25%">Col1</th>
<th width="20%">Col2</th>
<th width="20%">Col3</th>
<th width="20%">Col4</th>
</thead>
<tbody id="aktion-repeat" xf:repeat-nodeset="//aktionen">
<tr>
<td>
...
</td>
<td>
...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="orderListRepeat">
<h3>Actions</h3>
<div>
<table class="table table-hover">
<thead>
<th width="30%">Col1</th>
<th width="70%">Col2</th>
</thead>
<tbody id="teilaktion-repeat" xf:repeat-nodeset="//aktionen[index('aktion-repeat')]/teilaktionen/taktion">
<tr>
<td>
...
</td>
<td>
...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
编辑: @birdspider 谢谢你的回答。我试过了，但它并没有真正起作用。
这是我的 CSS:
.orderListRepeat {
border: solid 1px grey;
height: 80vh;
overflow-y: auto;
overflow-x: auto;
}
这是前两个表的代码片段(我尝试使用标签 <div class="col-md-3 orderListRepeat"> 但如果我这样做，每一列都与整个屏幕一样宽，并且列之间显示但无论如何它应该可以工作):
<div class="row">
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Personenübersicht</h3>
<table class="table table-hover" data-sort-order="desc">
<thead>
<tr>
<th width="15%"/>
<th data-field="lfdNr" width="15%" data-sortable="true">Lfd. Nr.</th>
<th data-field="name" width="40%" data-sortable="true">Name</th>
<th data-field="aktiverNutzer" width="30%" data-sortable="true">aktiver Nutzer</th>
</tr>
</thead>
<tbody id="person-repeat" xf:repeat-nodeset="//person">
<tr>
<td>
Content
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref1"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref2"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
<td>
<xf:trigger appearance="minimal">
<xf:label ref="ref3"/>
<xf:action ev:event="DOMActivate">
...
</xf:action>
</xf:trigger>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Details</h3>
<table class="table table-striped">
<tr>
<td>
<b>Name:</b>
</td>
<td>
<xf:output ref="//person[index('person-repeat')]/name"/>
</td>
</tr>
<tr>
...
</tr>
...
</table>
</div>
</div>
</div>
问题:结果是现在列的高度至少是 View 高度的 80%。当表格中的行过多时，滚动条将无法像您在屏幕截图中看到的那样工作。宽度重叠列的问题也仍然存在。令人困惑的是，当我将代码复制到 codepen 中时，一切正常。
最佳答案
是这样的:codepen
注释的变化是:
CSS:
/* .orderListRepeat basicly matches the cols in my codepen code */
.orderListRepeat {
border: solid 1px grey;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}
100vh 为 100% 视口(viewport)高度
html:
<div class="container">
<div class="row">
<div class="col-md-3 orderListRepeat">
<h3>Personenübersicht</h3>
<table class="table table-hover" data-sort-order="desc">
<thead>
...
在 .container 中移除一些不必要的嵌套、样式属性和包装
我不是前端开发人员 - 所以要小心。
关于css - Bootstrap 列相互重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47220353/