Question

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

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

Answer 2

请使用以下css。它对我有用。

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

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 3

更好地使用Bootstrap来正确对齐表头和正文

表体列与Header列的宽度不同

3 个答案: