Question

我根据eXist-db（ XForms ， XQuery ）编写了一个XML technologies的网络应用程序，并使用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;
}

这是前两个表的codesnippet （我尝试使用标记<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>

问题：结果是列的高度至少现在视图高度的80％。当表格中有太多行时，滚动条不会像截图中看到的那样起作用。宽度中重叠列的问题仍然存在。令人困惑的是，当我将代码复制到codepen中时，一切都会像它应该的那样工作。

Answer 1

类似这样的事：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％视口高度

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>
        ...

删除不必要的嵌套，样式attrs和包装.container

我不是前端开发者 - 所以要小心。

Bootstrap列彼此重叠

1 个答案: