javascript - スタイル ダイナミック テーブル、TD 固定幅

Question

trとtdを動的に作成するテーブルがあります。

一連のtdが作成された後、フォーマットが失われ、結果が互いに「圧縮」されました。作成された各tdの幅を一定に保つにはどうすればよいですか?

tdのwidth属性を設定しようとしましたが、数回挿入した後、それらは圧縮されました。

テーブルが大きくなる可能性があるため、スクロールバーが必要です。そして、それを行うには、tdに固定幅が必要です

Answer 1

上記の @Milche Patan からのコメントは、キーを保持しています: 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;
}