我正在创建一个包含6列的表格。第一列有一行文字,将是最宽的一列。剩下的5列将有文本的标题将被动态加载,所以我不知道宽度。列表大小匹配的html表格
本表采用Bootstrap(v3.3)设计,需要有响应。
有没有办法将第一列的大小设置为设定的大小,然后根据最大的文本值来确定剩余列的大小,使它们全部具有相同的宽度?
以下是仅显示标题和第一行的表格。正如你所看到的标题列有不同的宽度。
<table>
<thead>
<tr>
<th></th>
<th>Terrible</th>
<th>Bad</th>
<th>Average</th>
<th>Good</th>
<th>Excellent</th>
</tr>
</thead>
<tr>
<td>How was the food in the hotel</td>
<td class="text-center">o</td>
<td class="text-center">o</td>
<td class="text-center">o</td>
<td class="text-center">o</td>
<td class="text-center">o</td>
</tr>
</table>
这里是一个demo fiddle
虽然这肯定工程,我想知道是否有一个CSS代码少的代码解决方案? –
可能有,如果我打算,我会使用'table-layout:fixed',但是左列会出现问题。如果有人知道一个CSS解决方案,它会很有趣。 – Benjamin
我希望有一个CSS解决方案。这是有效的,但第一列包含在调整大小中,但它应占用剩余的空间。 –