如何禁用固定的表格布局并为每个单元格赋予不同的宽度

Question

我试图给表中的每个单元格一个不同的宽度（根据其中的文本长度，就像在普通表中一样）。
如何禁用table-layout: fixed来修复此表？

代码如下：

＆＃13;

＆＃13;

[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;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在[class * = type]表中CSS类更改表布局如下：

table-layout:auto

自动表格布局根据内容设置每个单元格的宽度。

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