CSS表让列的夫妇等于

Question

我有一个表中的一个页面，每排有两个和两个元素，如下面的代码：

<tr> 
    <th></th> 
    <td></td> 
    <th></th> 
    <td></td> 
</tr> 

我想要做的是有每对头部和单元的具有全表宽度的50％宽度但不使用固定宽度。 对此有何建议？

Answer 1

tr代表“表格行”。所以如果你想让第4/tr分裂成50％宽度的两个不同的行，你必须创建两个独立的表格行tr。

为了使细胞停留在50％，无论细胞内容如何，​​您可以将table-layout:fixed;应用于表格。

table { 
 
width:100%; 
 
table-layout:fixed; 
 
} 
 
th, td { 
 
    border:1px solid #000; 
 
}

<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello four</td> 
 
    </tr> 
 
</table> 
 
<br><br> 
 
<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
    </tr> 
 
    <tr> 
 
    <th>hello three hello three hello three hello three hello three hello three hello three hello three</th> 
 
    <td>hello four</td> 
 
    </tr> 
 
</table>