javascript - 样式动态表，TD固定宽度

Question

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

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

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

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

Answer 1

你需要两件事：

1. 对于您的 td，只需设置最小宽度。它将向您保证良好的宽度，因为如果没有足够的空间，“正常”宽度属性仍会缩小。

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

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

有关溢出属性的更多信息：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;
}