左右固定table表格源码分享：
<body>
<div id="table_div" class="table_div">
<table id="table" class="table" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
<th>列7</th>
<th>列8</th>
<th>列9</th>
<th>列10</th>
<th>列11</th>
<th>列12</th>
<th>列13</th>
<th>列14</th>
<th>列15</th>
<th>列16</th>
<th>列17</th>
<th>列18</th>
<th>列19</th>
<th>列20</th>
<th>列20</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
<td>1-7</td>
<td>1-8</td>
<td>1-9</td>
<td>1-10</td>
<td>1-11</td>
<td>1-12</td>
<td>1-13</td>
<td>1-14</td>
<td>1-15</td>
<td>1-16</td>
<td>1-17</td>
<td>1-18</td>
<td>1-19</td>
<td>1-20</td>
<td>1-20</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
<td>2-8</td>
<td>2-9</td>
<td>2-10</td>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
<td>2-14</td>
<td>2-15</td>
<td>2-16</td>
<td>2-17</td>
<td>2-18</td>
<td>2-19</td>
<td>2-20</td>
<td>2-20</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td>3-8</td>
<td>3-9</td>
<td>3-10</td>
<td>3-11</td>
<td>3-12</td>
<td>3-13</td>
<td>3-14</td>
<td>3-15</td>
<td>3-16</td>
<td>3-17</td>
<td>3-18</td>
<td>3-19</td>
<td>3-20</td>
<td>3-20</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
<td>4-8</td>
<td>4-9</td>
<td>4-10</td>
<td>4-11</td>
<td>4-12</td>
<td>4-13</td>
<td>4-14</td>
<td>4-15</td>
<td>4-16</td>
<td>4-17</td>
<td>4-18</td>
<td>4-19</td>
<td>4-20</td>
<td>4-20</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
<td>5-8</td>
<td>5-9</td>
<td>5-10</td>
<td>5-11</td>
<td>5-12</td>
<td>5-13</td>
<td>5-14</td>
<td>5-15</td>
<td>5-16</td>
<td>5-17</td>
<td>5-18</td>
<td>5-19</td>
<td>5-20</td>
<td>5-20</td>
</tr>
</tbody>
</table>
</div>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.table_div {
overflow-x: auto;
width: 100%;
background: #f8f8f8;
}
.table {
position: relative;
width: 100%;
}
.table tr {
display: flex;
margin-left: 140px;
margin-right: 140px;
}
.table tr td,
.table tr th {
border: 1px solid #ccc;
color: #333;
line-height: 40px;
padding: 0 20px;
text-align: center;
width: 100px;
}
.table tr>th:first-child,
.table tr>td:first-child {
background-color: #ddd;
position: fixed;
z-index: 2;
left: 0;
}
.table th:last-child,
.table tr>td:last-child {
background-color: #ddd;
position: fixed;
z-index: 2;
right: 0;
}
</style>
原创文章链接：http://www.zhicaipt.cn/hz_index/view/article_detail.html?id=39
网友评论