Установка ширины подзаголовка таблицы в CSS

Question

У меня есть таблица, подобная изображенной выше, которая использует colspan и rowspan.Я хочу исправить всю ширину столбца.Я могу сделать первый и последний (Нет и замечание), и я могу установить ширину типов.Как я могу указать ширину A, B и C?

Я пытался дать ячейки A, B и C CSS-классам и задавать индивидуальную ширину, но это не имеет никакого эффекта.Ширина всегда контролируется любым содержимым в ячейках ниже.

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>

Возможно ли, не прибегая к расположению внутри ячеек фиксированной ширины?

Answer 1

Измените свойство макета таблицы на 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>

Answer 2

изменить макет таблицы: авто

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