CODEWITHSUNDEEP
csshtml-table
jgozal
jgozal

Reputation: 1582

How to make a table column take up the same space as multiple other columns

I'm looking to create something like this: enter image description here

But can't figure out what's the best way to make the 15 year and 30 year headers take as much space as the 4 columns below them.

Is there anything simple I could add to the first pair of <th> below? e.g: colsize, colwidth etc 

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
     ... more code here
  </tbody>
</table>

Upvotes: 0

Views: 1835

Answers (1)

Andrew Savetchuk
Andrew Savetchuk

Reputation: 1610

You need to add colspan attribute to th tag like so:

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}
<table>
  <thead>
    <tr>
      <th colspan="4">1</th>
      <th colspan="4">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Number 4 defines the number of columns a cell should span.

Upvotes: 3

Related Questions