Question

上

我所需要的只是一个简单的普通表，即使已经固定在滚动上。

CSS：

table {
  width: 100%;
}

thead {
  width: 100%;
  display: table;
}

tbody {
  overflow: auto;
  height: 200px;
  display: block;
}

td {
  width: 100px;
}

HTML：

<thead>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> head1 </td>
     <td width=100 align='center'> head2 </td>
     <td width=100 align='center'> head3 </td>
     <td width=100 align='center'> head4 </td>
     <td width=100 align='center'> head5 </td>
     <td width=100 align='center'> head6 </td>
     <td width=100 align='center'> head7 </td>
     <td width=100 align='center'> head8 </td>
     <td width=100 align='center'> head9 </td>
     <td width=100 align='center'> head10</td>
     <td width=100 align='center'> head11</td>
</thead>
<tr>
    <td width=100 align='center'> id </td>
    <td width=100 align='center'> 1 </td>
    <td width=100 align='center'> 2 </td>
    <td width=100 align='center'> 3 </td>
    <td width=100 align='center'> 4 </td>
    <td width=100 align='center'> 5 </td>
    <td width=100 align='center'> 6 </td>
    <td width=100 align='center'> 7 </td>
    <td width=100 align='center'> 8 </td>
    <td width=100 align='center'> 9 </td>
    <td width=100 align='center'> 0 </td>
    <td width=100 align='center'> 11</td>
</tr>

// The same table rows repeats many times

</tbody>
</table>

Answer 1

我认为你最接近的就是这个。

您将无法自动调整尺寸＆＃34;带有表格单元格的标题，反之亦然，因此这些宽度应该是＆＃34;硬编码＆＃34;。

另外，要使标题符合＃34;并弥补身体的滚动条，添加填充。在下面的代码中，我添加了一个＆＃34; 15px＆＃34;的填充。对于没有滚动条的＆＃34; thead＆＃34 ;.

编辑：这是一个小提琴：https://jsfiddle.net/FredM7/25abq8gf/

查看完整的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            table {
                width: 200px;
                background: green;
            }

            table tbody, table thead
            {
                display: block;
            }

            table thead 
            {
               padding-right: 15px;
            }

            table tbody 
            {
               overflow: auto;
               height: 100px;
            }

            thead th, tbody td {
                width: 72px;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>
                        Head 1
                    </th>
                    <th>
                        Head 2
                    </th>
                    <th>
                        Head 3
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

固定的thead与tbody不匹配

1 个答案: