Question

我正在尝试将表中的列扩展为全宽，当它溢出最大高度时具有自动高度功能。我对每列都有一个宽度约束，如示例所示，如果我想保留两个功能，有人可以建议修复

如果我使用display:block我不能将列的宽度扩展到最后（蓝色表），如果我删除我不能使用自动滚动属性，它只显示所有内容不考虑最大高度约束（橙色表）

Answer 1

通过将表格包装到DIV标记中来实现此目的的最简单方法之一。见这个例子：

我拿出了display：block out of the table ...请参阅包含表格的DIV的divstyle。

.divstyle {
    height:100px;
    width:100%;
    border:1px solid red;
    overflow:auto;
}

Answer 2

将表转换为块元素永远不是一个好主意，它是一个表元素。而是使用包装纸（没有实际上不会将糖果包装纸粘在屏幕上）。

（Demo）

HTML

<div class="wrap">
    <table class="tabHeight1">
        <tr>
            <td class="tdwidth">hey1</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey2</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey3</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey4</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey5</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey6</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey7</td>
            <td class="tdwidth">hey1</td>
        </tr>
    </table>
</div>

CSS

.wrap {
    max-height: 100px!important;
    overflow: auto;
    border: 2px solid black;
}
.tabHeight1 {
    width:100%;
    padding:2px;
    color:blue;
}

使用自动高度滚动将表格列扩展为全宽

2 个答案: