查看DEMO演示效果 http://gong.gg/my-test/table/index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>table表头和列固定</title> <style> .container { width: 800px; height: 300px; overflow: scroll; border: 1px solid #ccc; } table { border-collapse: collapse; } table tbody tr:nth-child(odd) td { background-color: #f5f5f5; } table thead tr > th { position: sticky; top: 0; background: #ccc; } table tbody tr > td { border: 1px solid #eee; min-width: 100px; } table thead tr > th, table tbody tr > td { padding: 10px; } table thead tr > th:first-child, table thead tr > th:last-child { z-index: 1; } table thead tr > th:first-child, table tbody tr > td:first-child, table thead tr > th:last-child, table tbody tr > td:last-child { position: sticky; text-align: center; } table thead tr > th:first-child, table tbody tr > td:first-child { left: 0; -webkit-box-shadow: 1px 0px 1px #ddd; -moz-box-shadow: 1px 0px 1px #ddd; box-shadow: 1px 0px 1px #ddd; -webkit-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); -moz-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); } table thead tr > th:last-child, table tbody tr > td:last-child { right: 0; -webkit-box-shadow: 0px 0px 1px #ddd; -moz-box-shadow: 0px 0px 1px #ddd; box-shadow: 0px 0px 1px #ddd; -webkit-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); -moz-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); } table tbody tr > td:first-child, table tbody tr > td:last-child { background: #fff; } </style> </head> <body> <p>标题、第一列、最后一列固定、方便操作和数据对应表头</p> <p>下面提供了一个简单的演示、具体的实际效果可以查看 <a href="https://shopxo.net/" target="_blank">ShopXO</a> 系统中的应用</p> <div class="container"> <table> <thead> <tr> <th>title1</th> <th>title2</th> <th>title3</th> <th>title4</th> <th>title5</th> <th>title6</th> <th>title7</th> <th>title8</th> <th>title9</th> <th>title10</th> </tr> </thead> <tbody> <tr> <td>data1-1</td> <td>data1-2</td> <td>data1-3</td> <td>data1-4</td> <td>data1-5</td> <td>data1-6</td> <td>data1-7</td> <td>data1-8</td> <td>data1-9</td> <td>data1-10</td> </tr> <tr> <td>data2-1</td> <td>data2-2</td> <td>data2-3</td> <td>data2-4</td> <td>data2-5</td> <td>data2-6</td> <td>data2-7</td> <td>data2-8</td> <td>data2-9</td> <td>data2-10</td> </tr> <tr> <td>data3-1</td> <td>data3-2</td> <td>data3-3</td> <td>data3-4</td> <td>data3-5</td> <td>data3-6</td> <td>data3-7</td> <td>data3-8</td> <td>data3-9</td> <td>data3-10</td> </tr> <tr> <td>data4-1</td> <td>data4-2</td> <td>data4-3</td> <td>data4-4</td> <td>data4-5</td> <td>data4-6</td> <td>data4-7</td> <td>data4-8</td> <td>data4-9</td> <td>data4-10</td> </tr> <tr> <td>data5-1</td> <td>data5-2</td> <td>data5-3</td> <td>data5-4</td> <td>data5-5</td> <td>data5-6</td> <td>data5-7</td> <td>data5-8</td> <td>data5-9</td> <td>data5-10</td> </tr> <tr> <td>data6-1</td> <td>data6-2</td> <td>data6-3</td> <td>data6-4</td> <td>data6-5</td> <td>data6-6</td> <td>data6-7</td> <td>data6-8</td> <td>data6-9</td> <td>data6-10</td> </tr> <tr> <td>data7-1</td> <td>data7-2</td> <td>data7-3</td> <td>data7-4</td> <td>data7-5</td> <td>data7-6</td> <td>data7-7</td> <td>data7-8</td> <td>data7-9</td> <td>data7-10</td> </tr> <tr> <td>data8-1</td> <td>data8-2</td> <td>data8-3</td> <td>data8-4</td> <td>data8-5</td> <td>data8-6</td> <td>data8-7</td> <td>data8-8</td> <td>data8-9</td> <td>data8-10</td> </tr> <tr> <td>data9-1</td> <td>data9-2</td> <td>data9-3</td> <td>data9-4</td> <td>data9-5</td> <td>data9-6</td> <td>data9-7</td> <td>data9-8</td> <td>data9-9</td> <td>data9-10</td> </tr> <tr> <td>data10-1</td> <td>data10-2</td> <td>data10-3</td> <td>data10-4</td> <td>data10-5</td> <td>data10-6</td> <td>data10-7</td> <td>data10-8</td> <td>data10-9</td> <td>data10-10</td> </tr> </tbody> </table> </div> </body> </html>
2021-05-06 03:04