固定表头 [英] Fixed Table Header
本文介绍了固定表头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道如何做一个固定的表格头几种不同的方式，但我正在寻找最好的方法，我只想使用 以下是一个虚拟表结构：< table> ，< thead> ，< tbody> ，< tr& code>，< th> ，< td> / p>
< table>
< thead>
< tr>
< th> id< / th>
< th>名称< / th>
< th>栏位< / th>
< th>设施< / th>
< th> change< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> 1< / td>
< td> name1< / td>
< td> field1< / td>
< td> facility1< / td>
< td> change1< / td>
< / tr>
< tr>
< td> 2< / td>
< td> name2< / td>
< td> field2< / td>
< td> facility2< / td>
< td> change2< / td>
< / tr>
< tr>
< td> 3< / td>
< td> name3< / td>
< td> field3< / td>
< td> facility3< / td>
< td> change3< / td>
< / tr>
< tr>
< td> 4< / td>
< td> name4< / td>
< td> field4< / td>
< td> facility4< / td>
< td> change4< / td>
< / tr>
< tr>
< td> 5< / td>
< td> name5< / td>
< td> field5< / td>
< td> facility5< / td>
< td> change5< / td>
< / tr>
< tr>
< td> 6< / td>
< td> name6< / td>
< td> field6< / td>
< td> facility6< / td>
< td> change6< / td>
< / tr>
< tr>
< td> 7< / td>
< td> name7< / td>
< td> field7< / td>
< td> facility7< / td>
< td> change7< /td>
< / tr>
< tr>
< td> 8< / td>
< td> name8< / td>
< td> field8< / td>
< td> facility8< / td>
< td> change8< / td>
< / tr>
< tr>
< td> 9< / td>
< td> name9< / td>
< td> field9< / td>
< td> facility9< / td>
< td> change9< / td>
< / tr>
< tr>
< td> 10< / td>
< td> name10< / td>
< td> field10< / td>
< td> facility10< / td>
< td> change10< / td>
< / tr>
< tr>
< td> 11< / td>
< td> name11< / td>
< td> field11< / td>
< td> facility11< / td>
< td> change11< / td>
< / tr>
< tr>
< td> 12< / td>
< td> name12< / td>
< td> field12< / td>
< td> facility12< / td>
< td> change12< / td>
< / tr>
< tr>
< td> 13< / td>
< td> name13< / td>
< td> field13< / td>
< td> facility13< / td>
< td> change13< / td>
< / tr>
< tr>
< td> 14< / td>
< td> name14< / td>
< td> field14< / td>
< td> facility14< / td>
< td> change14< / td>
< / tr>
< tr>
< td> 15< / td>
< td> name15< / td>
< td> field15< / td>
< td> facility15< / td>
< td> change15< / td>
< / tr>
< / tbody>
< / table>
解决方案
尝试此工作演示。以下代码：
table {display：flex; flex-flow：column;高度：100％; width：100％; border-collapse：单独; border-spacing：0 1px;} table thead {flex：0 0 auto; width：calc（100％ - 0.9em）;} table tbody {flex：11 auto;显示：block; overflow-y：scroll;} table tbody tr {width：100％;} table-layout：fixed;} tbody td，thead th {border-right：1px solid transparent; vertical-align：middle;} thead th {height：35px; font-size：16px; text-align：left; text-transform：uppercase;} tbody td {text-align：left; height：30px; background：＃d5d5d5;}。table-cont {width：100％; height：350px;}
< div class = -cont> < table> < aad> < tr> < th> id< / th> < th>名称< / th> < th>栏位< / th> < th>设施< / th> < th> change< / th> < / tr> < / thead> < tbody> < tr> < td> 1< / td> < td> name1< / td> < td> field1< / td> < td> facilities1< / td> < td> change1< / td> < / tr> < tr> < td> 2< / td> < td> name2< / td> < td> field2< / td> < td> facility2< / td> < td> change2< / td> < / tr> < tr> < td> 3< / td> < td> name3< / td> < td> field3< / td> < td> facility3< / td> < td> change3< / td> < / tr> < tr> < td> 4< / td> < td> name4< / td> < td> field4< / td> < td> facility4< / td> < td> change4< / td> < / tr> < tr> < td> 5< / td> < td> name5< / td> < td> field5< / td> < td> facility5< / td> < td> change5< / td> < / tr> < tr> < td> 6< / td> < td> name6< / td> < td> field6< / td> < td> facility6< / td> < td> change6< / td> < / tr> < tr> < td> 7< / td> < td> name7< / td> < td> field7< / td> < td> facility7< / td> < td> change7< / td> < / tr> < tr> < td> 8< / td> < td> name8< / td> < td> field8< / td> < td> facility8< / td> < td> change8< / td> < / tr> < tr> < td> 9< / td> < td> name9< / td> < td> field9< / td> < td> facility9< / td> < td> change9< / td> < / tr> < tr> < td> 10< / td> < td> name10< / td> < td> field10< / td> < td> facility10< / td> < td> change10< / td> < / tr> < tr> < td> 11< / td> < td> name11< / td> < td> field11< / td> < td> facility11< / td> < td> change11< / td> < / tr> < tr> < td> 12< / td> < td> name12< / td> < td> field12< / td> < td> facility12< / td> < td> change12< / td> < / tr> < tr> < td> 13< / td> < td> name13< / td> < td> field13< / td> < td> facility13< / td> < td> change13< / td> < / tr> < tr> < td> 14< / td> < td> name14< / td> < td> field14< / td> < td> facility14< / td> < td> change14< / td> < / tr> < tr> < td> 15< / td> < td> name15< / td> < td> field15< / td> < td> facility15< / td> < td> change15< / td> < / tr> < / tbody> < / table>< / div>
I know how to make a fixed table-header a few different ways, however I'm looking for the best way, and I only want to use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags which the HTML spec provides you.
Here is a dummy table structure:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
解决方案
Try this working demo. Below code:
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
border-collapse: separate;
border-spacing: 0 1px;
}
table thead {
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
tbody td,
thead th {
border-right: 1px solid transparent;
vertical-align: middle;
}
thead th {
height: 35px;
font-size: 16px;
text-align: left;
text-transform: uppercase;
}
tbody td {
text-align: left;
height: 30px;
background: #d5d5d5;
}
.table-cont {
width: 100%;
height: 350px;
}
<div class="table-cont">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
</div>
这篇关于固定表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
