纯css实现内容可滚动的表格

实现纯css实现内容可滚动的表格，需要将表格的内容（tbody，tr，thead，td等元素的display属性设为block）

表格的HTML代码

<table class="scrollTable">
<thead>
<tr>
<th class="field1Th">field1Th</th>
<th class="field2Th">field2Th</th>
<th class="field3Th">field3Th</th>
<th class="field4Th">field4Th</th>
<th class="field5Th">field5Th</th>
</tr>
<thead>
<tbody>
<tr>
<td class="field1Td">field1Td</td>
<td class="field2Td">field2Td</td>
<td class="field3Td">field3Td</td>
<td class="field4Td">field4Td</td>
<td class="field5Td">field5Td</td>
</tr>
<tr>
<td class="field1Td">field1Td</td>
<td class="field2Td">field2Td</td>
<td class="field3Td">field3Td</td>
<td class="field4Td">field4Td</td>
<td class="field5Td">field5Td</td>
</tr>
<tr>
<td class="field1Td">field1Td</td>
<td class="field2Td">field2Td</td>
<td class="field3Td">field3Td</td>
<td class="field4Td">field4Td</td>
<td class="field5Td">field5Td</td>
</tr>
</tbody>
</table>

CSS代码

        .field1Td, .field1Th{
            width: 5%;
            text-align: center;
        }
        .field2Td, .field2Th {
            width: 27%;
            text-align: center;
        }
        .field3Td, .field3Th {
            width: 27%;
            text-align: center;
        }
        .field4Td, .field4Th {
            width:27%;
            text-align: center;
        }
        .field5d, .field5Th {
            width: 14%;
            text-align: center;
        }
        .scrollTable {
            width: 100%;
            margin-bottom: 60px;
        }
        table.scrollTable thead,
        table.scrollTable th,
        table.scrollTable tbody,
        table.scrollTable tr,
        table.scrollTable td
         {
            display: block;
        }
        table.scrollTable tbody {
            height: 320px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        table.scrollTable tbody td,
        table.scrollTable thead th {
            float: left;
        }
        table.scrollTable tr {
            clear:both;
        }
		/* 下面的css能隐藏chrome的纵向滚动条*/
        table.scrollTable tbody::-webkit-scrollbar{
            display: none;
        }

效果图：

参考链接：

https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody