Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

thead with one td (full width) and tbody with 2 columns (width not depending on thead)

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.

like image 894
user2625636 Avatar asked Jul 28 '13 10:07

user2625636


People also ask

Can you have TD in thead?

<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.

What is the difference between thead and tbody?

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.

How do you fix td width?

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.

How do you give equal width to all TD tables?

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.


1 Answers

<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

like image 165
Ritabrata Gautam Avatar answered Sep 21 '22 00:09

Ritabrata Gautam