Question

我创建了一个html表格，我正在尝试为其设置max-height和height属性但是表格不接受它们
我正在使用此代码
的 HTML

<table class="table table-striped table-hover" id="Table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 0 0</td>
            <td>Row 0 1</td>
            <td>Row 0 2</td>
            <td><a id="table-buttons" class="btn btn-primary">Row 0 3</a></td>
        </tr>
        <tr>
            <td>Row 1 0</td>
            <td>Row 1 1</td>
            <td>Row 1 2</td>
            <td><a id="table-buttons" class="btn btn-primary">Row 1 3</a></td>
        </tr>
        <tr>
            <td>Row 2 0</td>
            <td>Row 2 1</td>
            <td>Row 2 2</td>
            <td><a id="table-buttons" class="btn btn-primary">Row 2 3</a></td>
        </tr>
    </tbody>
</table>

CSS

#Table {
    width: 600px;
    max-width: 600px;
    height: 210px;
    max-height: 210px;
    overflow-y: auto;
}

td {
    width: 150px;
    max-width: 150px;
}

表：

指定的height和max-height一定不允许表格携带超过这三行和标题但是当我添加另一行表格时完全忽略height和max-height
并扩展以适应四行

我希望表格显示overflow-y: auto属性的结果滚动条但是没有发生

我正在使用此Bootstrap样式

请帮助

Answer 1

表格内容否决了设置表格高度。请参阅此答案：display table height not always respected

你可以通过在它周围包裹一个div来解决它（并在div上设置高度和溢出）。

Answer 2

将表格放入div中，并设置该div的高度和宽度：

<div id="Table">
   <table class="table table-striped table-hover">
    <!-- Table rows and data -->
   </table>
</div>

注意：从表格标签中删除id。

Answer 3

只需在Start Job at Step...周围打div，结帐Codepen即可获得演示

Answer 4

您应该定位课程，而不是ID。

像这样：

.table {
    width: 600px;
    max-width: 600px;
    height: 210px;
    max-height: 210px;
    overflow-y: auto;
}

表格不响应css属性

4 个答案: