html - 表格 - td 宽度百分比，溢出不起作用

Question

我正在尝试构建一个包含 td 的表格，该表格的 width 设置为百分比，当溢出时出现水平滚动条。

不幸的是，我无法做到这一点。

http://jsfiddle.net/ne45s2wf/1/

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;
}

1. 我想知道的第一件事是 td-width 的相对百分比是多少？是否可以将其设置为相对于 table？

2. 我会为 td 设置一个最大宽度百分比，overflow hidden。虽然这适用于 td，但当其宽度设置为百分比时，父容器不会将其宽度与 td 子容器对齐。 parent 的宽度就好像 child 没有设置任何宽度一样。此外，表格现在不再“响应”。

Answer 1

我会看一下 bootstrap。我不确定你的意思是什么，但你的 table 好像满了。 Bootstrap 具有响应式表格，这些表格将以您指定的方式滚动到小尺寸。看看这个:

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