Как поменять ширину отдельной ячейки

* { 
  box-sizing:border-box; 
} 
 
.caption { 
  padding: 1rem; 
} 
 
.table { 
   border: solid 1px blue; 
   border-collapse: collapse; 
   max-width: 500px; 
  width: 100%; 
} 
 
.tr { 
  display: table; 
  width: 100%; 
  table-layout:fixed; 
} 
 
.td { 
   border: solid 1px blue; 
   border-left: none; 
   padding: 10px; 
   
  display: table-cell; 
  vertical-align: middle; 
} 
 
.td:first-child { 
  width: 30px; 
} 
 
.td.special{ 
   width: 50px; 
}

<div class="table"> 
    <div class="caption">Таблица с заданными размерами</div> 
   
    <div class="tr"> 
        <div class="td">1</div> 
        <div class="td">2</div> 
    </div> 
   
    <div class="tr"> 
        <div class="td special">1a</div> 
        <div class="td">2</div> 
    </div> 
   
    <div class="tr"> 
        <div class="td">1</div> 
        <div class="td">2</div> 
    </div> 
</div>

table { 
   border: solid 1px blue; 
   border-collapse: collapse; 
   max-width: 500px; 
  width: 100%; 
   height: 100px; 
  table-layout:fixed; 
} 
 
tr { 
  display: flex; 
  width: 100%; 
} 
 
td, th { 
   border: solid 1px blue; 
   padding: 10px; 
  width: 100%; 
  border-left: none; 
  border-top: none; 
   
} 
 
tr:last-child td, 
tr:last-child th{ 
  border-bottom: none; 
} 
 
td:first-child, 
th:first-child { 
  flex-basis: 0; 
  flex-grow:0; 
} 
 
.special{ 
   width: 50px; 
}

<table> 
    <caption>Таблица с заданными размерами</caption> 
    <tr> 
        <th style="width:30px">1</th> 
        <th>2</th> 
    </tr> 
    <tr> 
        <th class="special">1a</th> 
        <th>2</th> 
    </tr> 
    <tr> 
        <th>1</th> 
        <th>2</th> 
    </tr> 
</table>

table table { 
   border: solid 1px blue; 
   border-collapse: collapse; 
  border-spacing: 0; 
   max-width: 500px; 
  width: 100%; 
  table-layout:fixed; 
} 
 
 
table table td,  
table table th { 
   border: solid 1px blue; 
   padding: 10px;   
} 
 
table table td:first-child,  
table table th:first-child { 
  width: 30px; 
} 
 
table table th.special { 
  width: 50px; 
}

<table>   
  <tr> 
    <td> 
      <table> 
        <tr> 
          <td> 
            Таблица с заданными размерами 
          </td> 
        </tr> 
      </table> 
       
      <table> 
        <tr> 
          <th>1</th> 
          <th>2</th> 
        </tr> 
      </table> 
   
      <table> 
        <tr> 
          <th class="special">1a</th> 
          <th>2</th> 
        </tr> 
      </table> 
   
      <table> 
        <tr> 
          <th>1</th> 
          <th>2</th> 
        </tr> 
      </table> 
    </td> 
  </tr> 
</table>