Question

我正在尝试构建一个包含td的表，其中width设置为百分比，并且在溢出水平滚动条时。

不幸的是，我无法实现这一目标。

HTML

<div class="container">
    <table>
        <tbody>
            <tr>
                <td>cell 1
                </td>
                <td>cell 2
                </td>
                <td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.container {
    position: relative;
    max-width: 500px;
    background-color: red;
}

table {
    width: 100%;
}

td.too-long {
    background-color: darkgreen;
    display: inline-block;
    width: 20%;
    overflow-x: scroll;
}

我想知道的第一件事是td - 相对于宽度的百分比是多少？是否可以将其设置为相对于table？
我会为td设置overflow hidden的最大宽度百分比。虽然这适用于td，但当父宽容设置为百分比时，父容器的宽度不会与td子对齐。父母宽度就好像孩子没有任何宽度设置。此外，该表现在不再“响应”了。

Answer 1

我会看一下bootstrap。我不确定你到底是什么意思，但好像你的桌子出了问题。 Bootstrap具有响应表，它将以您指定的小尺寸方式滚动。看看这个：

http://getbootstrap.com/css/#tables-responsive

table - td宽度百分比，溢出不起作用

1 个答案: