表格单元格宽度问题

Question

表格单元格宽度问题

16

我有一个表格有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>

我无法按照指定的宽度获取第二行的宽度，因为第二行的宽度也和第一行一样。

- user544079

可能是HTML表格不同行的单元格宽度的重复问题。 - oezi

3个回答

5

实际上，您可以将每个设置为display:block，并使您能够为每行设置不同的列宽度。

- Feldmahler

不要使用display:block，你可以尝试使用<tr style="display: inline-table; width: 100%;">。 - undefined

0

你可以使用nth:child。但它会应用于所有行。这将是相对的，而不是绝对的。

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

- Anoop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- clairesuzy · Accepted Answer

如果想在一个表格内完成这个任务，你需要添加更多的列，并使用colspan获取列的宽度，以便获得所需的组合宽度。

要使其在各种浏览器中良好运行，可能需要使用<col>和<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>