Управляйте шириной ячеек таблицы (td) с помощью 'table-layout: fixed;' не работает

Question

В приведенном ниже коде я пытаюсь контролировать ширину столбцов с помощью:

table-layout: fixed;

но это не работает;

[class^="col--"] { 
float: left;
}

.col-7 {
  width: 35%;
}

.col-4 {
  width: 20%;
}

.col-3 {
  width: 15%;
}

.col-2 {
  width: 10%;
}


.at { 
background-color:green;
color: white;
width: calc(100% - 3rem);
}

table { 
  margin: 1.5rem 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

td { 
  overflow: hidden;
  padding: .5rem 0;
  float: none;
}

<div class="at">
  <table>
    <thead>
      <tr>
        <th>Row 1</th>
        <th>Row 2</th>
        <th>Row 3</th>
        <th>Row 5</th>
        <th>Row 6</th>
      </tr>
      </thead>
      <tbody>     
        <tr>
          <td class="col-7">Lorem ipsum albatros</td>
          <td class="col-4">#fdsafdsa</td>
          <td class="col-4">Jan. 15, 2019</td>
          <td class="col-2">Pending Action</td>
          <td class="col--3">Lorem ipsum Delete</td>
       </tr>
      </tbody>
   </table>
</div>

Answer 1

Насколько я понимаю, ширину столбцов будет определять первая строка в таблице, которая, в данном случае, находится в thead ... если вы поместите туда классы, это работает.

[class^="col-"] {
  text-align: right;
  border: 1px solid red;
}

.col-7 {
  width: 35%;
}

.col-4 {
  width: 20%;
}

.col-3 {
  width: 15%;
}

.col-2 {
  width: 10%;
}

.at {
  background-color: green;
  color: white;
  width: calc(100% - 3rem);
}

table {
  margin: 1.5rem 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

td {
  overflow: hidden;
  padding: .5rem 0;
  float: none;
}

<div class="at">
  <table>
    <thead>
      <tr>
        <th class="col-7">Row 1</th>
        <th class="col-4">Row 2</th>
        <th class="col-4">Row 3</th>
        <th class="col-2">Row 5</th>
        <th class="col-3">Row 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-x">Lorem ipsum albatros</td>
        <td class="col-x">#fdsafdsa</td>
        <td class="col-x">Jan. 15, 2019</td>
        <td class="col-x">Pending Action</td>
        <td class="col-x">Lorem ipsum Delete</td>
      </tr>
    </tbody>
  </table>
</div>