Setting the Width of a Table Subheading in CSS

Question

I've got a table like the one pictured above, which uses both colspan and rowspan. I want to fix all the column widths. I can do the first and last (No and Remark), and I can set the width of Types. How can I specify the widths of A, B and C?

I've tried giving cells A, B and C CSS classes and setting individual widths but this does not have any effect. The widths are always controlled by any content in the cells below.

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

th, td {
  border:solid 1px #000;
  padding:.5em;
}

.no {
  width:10%;
}

.type {
  width:50%;
}

.remark {
  width:40%;
}

/* these don't work */

.type-a {
  width:10%;
}

.type-b {
  width:15%;
}

.type-c {
  width:25%;
}

<table>
  <thead>
    <tr>
      <th rowspan="2" class="no">No</th>
      <th colspan="3" class="type">Type</th>
      <th rowspan="2" class="remark">Remark</th>
    </tr>
    <tr>
      <th class="type-a">A</th>
      <th class="type-b">B</th>
      <th class="type-c">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Is it possible without resorting to placing fixed width divs inside the cells?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Oct 22 '18 at 12:09
Perhaps your answer can be found here? https://stackoverflow.com/questions/14765817/why-does-css-td-width-not-work — Namstel, Oct 22 '18 at 12:26

score 3 · Answer 1 · answered Oct 22 '18 at 13:10

3

change table-layout:auto

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

answered Oct 22 '18 at 13:10

Shivam Arora

354
2
8

score 2 · Accepted Answer · answered Oct 22 '18 at 13:19

Change the table-layout property to auto:

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

th, td {
  border:solid 1px #000;
  padding:.5em;
}

.no {
  width:10%;
}

.type {
  width:50%;
}

.remark {
  width:40%;
}

/* these don't work */

.type-a {
  width:10%;
}

.type-b {
  width:15%;
}

.type-c {
  width:25%;
}

<table>
  <thead>
    <tr>
      <th rowspan="2" class="no">No</th>
      <th colspan="3" class="type">Type</th>
      <th rowspan="2" class="remark">Remark</th>
    </tr>
    <tr>
      <th class="type-a">some long text to see the width remains the same </th>
      <th class="type-b">B</th>
      <th class="type-c">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Setting the Width of a Table Subheading in CSS

2 Answers2