Question

我有一个有2行的表，我需要不同的单元格宽度

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>

我无法获得指定的宽度，第二行也获得第一行的宽度。

Answer 1

使用一个表执行此操作，您需要引入更多列，然后使用colspan获取列宽，以便获得所需的组合宽度

要使其在浏览器中正常运行，您可能需要使用<col> and <colgroup>元素：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>

    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>
</body>

Answer 2

实际上，你可以将每个 tr 设置为 display：block ，并且它允许你为每一行设置不同的列宽。

Answer 3

您可以使用nth：child

但是它将应用于所有行。这将是相对的，而不是绝对的。

    tr>:nth-child(6){ 
    width: 20%;
    }
    tr>:nth-child(7){ 
    width: 80%;
    }

表格单元格宽度问题

3 个答案: