セルごとに横幅を変えられるテーブルを作りたいのですが。。。

Question

下記の様にセルごとに横幅を変えられるテーブルを作成しましたが、これだと例えばcolumn 1の幅を縮めていって2行になった瞬間に他のセルの横幅が変化してしまいます。あるセルの幅を縮めても他のセルの幅が変わらない様にしたいです。その場合どの様な変更を行えば良いでしょうか？ご教授いただけるとありがたいです。。。

<table>
  <thead>
    <tr>
      <th>
        column 1
      </th>
      <th>
        column 2
      </th>
      <th>
        column 3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="table-cell">   
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
      </td>
      <td>
        <div class="table-cell">
                  aaaa
        </div>
      </td>
      <td>
        <div class="table-cell">  
           aaaaaaa
        </div>
      </td>
    </tr>
  </tbody>
</table>

thead th {
  resize: horizontal;
  overflow: hidden;
  height: 5vh;
  background: #CECECE;
  border: 1px solid #707070;
}

table {
  text-align: center;
   border-collapse:collapse;
   width: max-content;
  table-layout:fixed;
}

.table-cell {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

th,
td {
    word-break: break-all;
  border:1px solid #707070;
  width: max-content;
  height: 5vh;
}

追記

状況をもう少し説明すると、

最初以下の状態からcolumn 1の幅を縮めていって

この状態まではテーブル全体の幅が小さくなっていくので他のセルの幅は縮まりません

しかしここでさらに縮めていき、2行になったあたりでテーブルのサイズが小さくならず変わりにcolumn 3が大きくなっていきます。

この様にcolumn 1を縮めていって最終的にcolumn 3のサイズが変わらない様にしたいです。

やりたい事は以上なのですが、例えば、以下の様に対応できるかも？と思っています。↓
2行になったところでこの様にcolumn 3のサイズが変わってしまうので下記の様に仮に最初から2行で表示してword-break: break-all;を消せば他のセルの幅が変わってしまうこともなくなります。
しかし下記は無理やり<br>で改行しているのでこれをやめたいです。最初から適当なところで中身の長さに応じて改行される様にできないか？という感じです。。。

  <tbody>
    <tr>
      <td>
        <div class="table-cell">   aaaaaaaaaaaaaaaaaaa
          <br>
          aaaaaaaaaaaaaaaaaaaaa
        </div>
      </td>

Comments

[m.ts10806]

テーブルタグをあきらめるしかないのでは。
列の幅は連動します。

[Hayato1201]

なるほど。。。ちなみにセルの他のセルの幅が変化してしまうのはセルの中身が2行になった瞬間からなのですが、それはなぜでしょうか？最初から2行で表示してword-break: break-all;を指定しなかったらこの事象は起こらない気がするのですが、最初から2行で表示するという様なことは可能でしょうか？？

[m.ts10806]

求めてるイメージがわかりません
テーブルタグはExcelなどと同じです。

[Hayato1201]

イメージを追記させていただきました。。。

Answer 1

th,
td {
    word-break: break-all;
  border:1px solid #707070;
  width: 1em;
  height: 5vh;
}
th{
  width:33vw;
}

などとするしかないのでは。