html - 表主体列的宽度与表头列的宽度不同

您好，我当前正在创建一个表，第一个标题的文本内容比另一个标题小，而正文上其对应的“列”自一个组名以来具有更宽/更大的内容。我要实现的是，标题和内容上的列应具有相应的宽度，具体取决于它们中较宽的那个。

这是表格的小提琴：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;
}

最佳答案

只需在您的CSS中添加此脚本

th {width:1px;}

关于html - 表主体列的宽度与表头列的宽度不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50500382/