1

内部に 8 列のテーブルがありますが、最後の 3 つの列には常に同じコンテンツが含まれているため、幅は常に 32 ピクセルになります。残りの 5 列を同じサイズにし、固定 td によって残された残りのスペースを埋める必要があります。

私は次のcssを持っています:

.myTable{
width:100%;
border-color:black;
border-width:1px;
}

.fixedTd{
width:32px;
}

そして私のマークアップ：

<table class="myTable">
<tr>
<td>Some short content</td>
<td>Some slightly longer content inside</td>
<td>Some very very loooooooong content to show, that columns are not equally sized</td>
<td>Not so long content</td>
<td>Tiny content</td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
</tr>
</table>

table-layout:fixed;テーブル クラスに追加しようとしましたが、この場合fixedTdはスタイルをオーバーライドしません。すべての tds が同じ幅になります。

問題

私が期待する結果を達成する方法はありますか?

4

1 に答える 1

2

現在のマークアップを使用して...追加table-layout:fixed;作業

フィドル

.myTable{
    width:100%;
    border: 1px solid black;
    table-layout:fixed;
}
td
{
    height: 30px;
    background: pink;
}
.fixedTd{
    width:32px;
}
于 2013-10-15T12:09:42.457 に答える