Question

我有表，动态创建 tr 和 td 。

创建了一堆 td 之后，他们失去了格式并且结果相互“压缩”了。如何为每个 td 创建恒定的宽度？

我尝试设置 td 的宽度属性，但经过多次插入后，它们会自行压缩。

我需要它，因为表可以长大，所以我需要一个滚动条来导航。要做到这一点，我希望 td 具有固定宽度

Answer 1

你需要两件事：

对于你的td，只需设置最小宽度。这将确保您有一个良好的宽度，因为如果没有足够的空间，“普通”宽度属性仍将缩小。

对于滚动条，请使用overflow属性。

<style>
    td { min-width: 150px; }
    table { overflow: scroll; }
</style>

有关overflow属性的更多信息：www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

@Milche Patern上面的评论包含密钥：table-layout: fixed。

我创建了一个JSFiddle来说明这一点：http://jsfiddle.net/UxkUC/

HTML

<div id="container">
    <table id="my-fixed-width-table">
        <tr>
            <td> Cell 0 </td>
            <td> Cell 1 </td>
            <td> Cell 2 </td>
            <td> Cell 3 </td>
            <td> Cell 4 </td>
            <td> Cell 5 </td>
            <td> Cell 6 </td>
            <td> Cell 7 </td>
            <td> Cell 8 </td>
            <td> Cell 9 </td>
        </tr>
        <tr>
            <td> Cell 0 </td>
            <td> Cell 1 </td>
            <td> Cell 2 </td>
            <td> Cell 3 </td>
            <td> Cell 4 </td>
            <td> Cell 5 </td>
            <td> Cell 6 </td>
            <td> Cell 7 </td>
            <td> Cell 8 </td>
            <td> Cell 9 </td>
        </tr>
    </table>
</div>

CSS

#container {
    width: 100%;
    overflow-x: auto;
}

#my-fixed-width-table {
    table-layout: fixed;
    width: 100%;
}

#my-fixed-width-table td {
    width: 200px;
    border: solid 1px black;
    text-align: center;
}

风格动态表，TD固定宽度

2 个答案: