Stretching a table-cell to the width of the table
I'm trying to stretch a table-cell to the width of my table. The width of the table depends on the width of my last table-row.
I couldn't find a way to solve it. Have you got an idea or is it just impossible because of the behaviour of a table. I created a fiddle where you can see what I mean. My aim is to开发者_开发百科 stretch the table-cell "TR1" to the width of tr3(sum of width from "TD1","TD","TD3").
This is how it should look like:
---------------
| TR1 |
---------------
| TR2 |
---------------
| TD1 |TD2| TD3 |
---------------
What I forgot to say is that unfortunately I cannot work with the style-attribute width because I'm getting data from different databases. I'm trying to sort them and put them into the table.
The correct way of doing it is by setting colspan attribute to 100%.
<table>
<tr>
<td colspan="100%">TR1</td>
</tr>
<tr>
<td colspan="100%">TR2</td>
</tr>
<tr>
<td>TD1</td><td>TD2</td><td>TD3</td>
</tr>
</table>
Specify a colspan with the amount of cells you want the row to cover
<tr><td colspan="3"></td>
<tr><td colspan="3"></td>
<tr><td></td><td></td><td></td></tr>
you need to span columns
<table style="border:3px solid black;">
<tr>
<td class="td1" colspan="3">TR1</td>
</tr>
<tr>
<td class="td2" colspan="3">TR2</td>
</tr>
<tr>
<td class="td3">TD1</td>
<td class="td3">TD2</td>
<td class="td3">TD3</td>
</tr>
</table>
I'm not 100% on the browser restrictions of doing this, but why not put the maximum possible number of columns there could be in row 3?
Like this:
<tr><td colspan="20"></td>
<tr><td colspan="20"></td>
<tr><td></td><td></td><td></td></tr>
精彩评论