html - 表体列与标题列的宽度不同

Question

你好，我目前正在创建一个表格，第一个标题的文本内容比另一个标题小，而它在主体上的相应列由于它是一个组的名称而具有更宽/更大的内容。我想要实现的是标题和内容上的列应该具有相应的宽度，具体取决于它们中哪个更宽。

这是表格的 fiddle :https://jsfiddle.net/pynechan/b4s3brqc/19/

//HTML
    <h2>Header fixed</h2>
<br/>
<br/>

<table>
    <thead>
        <tr>
            <th>HEADER</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>1. DATA</td>
            <td>1. DATA 2</td>
            <td>1. DATA 3</td>
        </tr>

    </tbody>
</table>

//CSS


   table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

tbody{
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Answer 1

只需将此脚本添加到您的 CSS 中即可

th {width:1px;}