テーブルレイアウトを無効にして各セルに異なる幅を与える方法

Question

テーブルの各セルに異なる幅（通常のテーブルのようなテキストの長さに応じて）を与えようとしています。
table-layout: fixedを無効にしてこの表を修正するにはどうすればよいですか？

コードは以下の通りです：あなたの[クラス* =タイプ]テーブルのCSSクラス変更テーブルレイアウトで

[class*=type] { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 12%; 
 
    max-height: 40px; 
 
    background: #0099ff; 
 
    box-shadow: 0 -5px 50px black; 
 
    z-index: 5; 
 
} 
 

 
[class*=type] table { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 12vh; 
 
    max-height: 40px; 
 
    line-height: 40px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    z-index: 3; 
 
    table-layout: fixed; 
 
    max-width: 600px; 
 
} 
 

 
[class*=type] tr td { 
 
    top: -25px; 
 
    color: dimgray; 
 
    font-size: 25px; 
 
    text-align: center; 
 
    border-radius: 20px; 
 
    background: white; 
 
    transition: 0.5s; 
 
    cursor: pointer; 
 
    opacity: 0.7; 
 
    margin: auto; 
 
    line-height: 38px; 
 
} 
 

 
[class*=type] tr td:hover { 
 
    filter: brightness(80%) 
 
} 
 

 
.additions_type { 
 
    height: 120px; 
 
    background: #cc80ff; 
 
    box-shadow: 0 -5px 50px #cc80ff; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    table-layout: auto !important; 
 
} 
 

 
.additions_type table { 
 
    width: 100%; 
 
    max-width: 1200px; 
 
}

<div class='additions_type'> 
 
    <table> 
 
     <tr> 
 
      <td id='o_addition_type_rightnow'> rightnow </td> 
 
      <td id='o_addition_type_all'> all </td> 
 
      <td id='o_addition_type_hair'> hair </td> 
 
      <td id='o_addition_type_head'> head </td> 
 
      <td id='o_addition_type_face'> face </td> 
 
      <td id='o_addition_type_bottom'> bottom </td> 
 
      <td id='o_addition_type_all'> extra </td> 
 
      <td id='o_addition_type_all'> full </td> 
 
      <td id='o_addition_type_all'> my favorites </td> 
 
      <td id='o_addition_type_all'> colorizing </td> 
 
      <td id='o_addition_type_all'> blueprints </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 1

次のように：

table-layout:auto 

自動テーブルレイアウトは、コンテンツに基づいて各セルの幅を設定します。

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout