样式动态表，TD固定宽度

Style Dynamic Table , TD fixed width

本文关键字：TD 固定宽度 动态 样式      更新时间：2023-09-26

我有一个动态创建tr和td的表。

在创建一堆 td 后，它们丢失了格式，结果相互"压缩"。如何为每个创建的 td 保持恒定宽度？

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

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

你需要

两样东西：

  1. 对于您的 td，只需设置最小宽度即可。它将确保您获得良好的宽度，因为如果没有足够的空间，"正常"宽度属性仍将缩小。

  2. 对于滚动条，请使用溢出属性。

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

有关溢出属性的详细信息：www.w3schools.com/cssref/pr_pos_overflow.asp

上面来自

@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;
}
相关文章：