Menu
Okay, long title short story. I've got a table structured like this:
<table>
<thead>
<tr><th>longer Heading with a width of 100%</th></tr>
</thead>
<tbody>
<tr><td>cell 1</td><td>cell 2</tr>
<tr><td>cell 3</td><td>cell 4</tr>
</tbody>
</table>
And I'd like the th to be full width and not change the width of the table cells. I guess there's some CSS display property that would make this possible but I haven't found a working solution yet.
894
<td> is allowed inside a <thead> . Permitted content of a <thead> are zero or more <tr> elements. In a <tr> element you can put a <td> and/or <th> element. It doesn't matter.
The <thead> element structures the headings in your table and this tells browsers what e.g. each column contains. The <tbody> element structures all of the content, so that the browser knows what the actual content of the table is.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td 's). With these two properties set, the table cells will be equal in size.
<table>
<thead>
<tr><th colspan="2">longer Heading with a width of 100%</th></tr>
</thead>
<tbody>
<tr><td>cell 1</td><td>cell 2 </td></tr>
<tr><td>cell 3</td><td>cell 4 </td></tr>
</tbody>
use of colspan will do the trick for you
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
