CODEWITHSUNDEEP
htmlcss
rekotc
rekotc

Reputation: 555

create a table with thead wider than the table itself

I have a very basic table, made up of 3 rows and 3 columns, and i'm trying to make it look like in this picture

table

(that is, the thead should be wider than the other rows). How do i achieve this effect? I tried with colspan but i can't get it right. The basic table is something like:

 <table>
   <thead>
   <tr>
   <th>Extra details</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   </tbody>
 </table>

Thanks!

Upvotes: 0

Views: 1531

Answers (3)

Jacob
Jacob

Reputation: 2164

You can use the caption element, which spans the table's width and is more semantically correct in your situation since it describes the entire table. Then use a pseudo-element to fill the remaining space in the rows and collapse the other columns.

table {
  width: 100%;
}

caption {
  border: 2px solid darkgray;
  background-color: lightgray;
}

tr:after {
    display: table-cell;
    content: "";
    width: 100%;
}
<table>
   <caption>Extra details</caption>
   <tbody>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
   </tr>
   </tbody>
 </table>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

you may use colspan and add a virtual forth col of 50% width:

tbody tr:after {
  content: '';
  display: table-cell;
  width:50%
}
th {
  background: gray;
  border: solid;
}
table {
  width: 100%;
}
<table>
  <thead>
    <tr>
      <th colspan="4">Extra details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

connexo
connexo

Reputation: 56783

You need to add colspan="3" to the th (number of cols must be identical in all tr in a table). Then make every last td in each tr much wider than the first two (using :last-child pseudo selector, see https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child).

table {
  width: 100%;
}
thead th {
  background-color: #ddd;
}
td:last-child {
  width: 60%;
}
<table>
  <thead>
    <tr>
      <th colspan="3">Extra details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions