table cell width issue
I have a table with 2 rows where i need varying cell width as
<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>
I cannot get the width as specified the second row also gets the width of the first row.
to do this with one table you need to introduce more columns and then get the column widths by using colspan so you can get the combined widths you require
to get this to work well across browser you will possibly need to use the <col> and <colgroup> elements : 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>
Actually, you can just have each tr set to display:block, and it will allow you to set different column widths for each row.
You can use nth:child
However it will apply to all rows. This will be relative and not absolute.
tr>:nth-child(6){
width: 20%;
}
tr>:nth-child(7){
width: 80%;
}
加载中,请稍侯......
精彩评论