如何使响应表和标头都固定在同一HTML表上
[英]How to make responsive table and header fixed both on same html table
问题描述
Here is the code pen https://codepen.io/shaswat/pen/EbwPNK 
这是密码笔https://codepen.io/shaswat/pen/EbwPNK
I have made an html table responsive by making all the columns getting repeated and show the correspondent row value up when its mobile display -- so the responsive part is done
我通过使所有列都重复来使html表响应并在其移动显示时向上显示对应的行值-因此响应部分已完成 Now having trouble to make the header fixed in this html table while scrolling the tbody - so tbody can have fixed height and that time scrolling header should be fixed -- applicable only for the resolutions greater than mobile display --need help in this
现在在滚动tbody时很难将标头固定在此html表中-因此tbody可以具有固定的高度，并且应该固定时间滚动标头-仅适用于比移动显示更大的分辨率-需要帮助
HTML 的HTML
<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>
<div class='rg-container'>
<div class='rg-content'>
<table class='rg-table'>
<thead>
<tr>
<th class='text '>id </th>
<th class='text '>somcol</th>
<th class='text '>biggger id</th>
<th class='text '>another id</th>
<th class='text '>med col</th>
<th class='text '>med col</th>
<th class='text '>sheet</th>
<th class='text '>sheet</th>
<th class='text '>anotherbigcoloumn</th>
<th class='text '>small</th>
<th class='text '>anotherbigcoloumn</th>
<th class='text '>dateformat</th>
<th class='text '>dateformat</th>
<th class='text '>small col</th>
<th class='text '>dateformat</th>
<th class='text '>averybigcolumnssssss</th>
<th class='text '>mediumclolumnss</th>
</tr>
</thead>
<tbody>
<tr>
<td class='text' data-title='id'>id</td>
<td class='text' data-title='somcol'>somcol</td>
<td class='text' data-title='biggger id'>biggger id</td>
<td class='text' data-title='another id'>another id</td>
<td class='text' data-title='med col'>med col</td>
<td class='text' data-title='med col'>med col</td>
<td class='text' data-title='sheet'>sheet</td>
<td class='text' data-title='sheet'>sheet</td>
<td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text' data-title='small'>small</td>
<td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='small col'>small col</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS 的CSS
.rg-container {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
padding: 1em 0.5em;
color: #222;
}
.rg-header {
margin-bottom: 1em;
text-align: left;
}
.rg-header > * {
display: block;
}
/* table */
table.rg-table {
width: 100%;
margin-bottom: 0.5em;
font-size: 1em;
border-collapse: collapse;
border-spacing: 0;
overflow:scroll;
}
table.rg-table tr {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: left;
color: #333;
}
table.rg-table thead {
border-bottom: 3px solid #ddd;
background:black;
}
table.rg-table tr {
border-bottom: 1px solid #ddd;
color: #222;
}
table.rg-table tr.highlight {
background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table th {
font-weight: bold;
padding: 0.35em;
font-size: 0.9em;
color:white;
}
table.rg-table td {
padding: 0.35em;
font-size: 0.9em;
}
table.rg-table .highlight td {
font-weight: bold;
}
table.rg-table th.number, td.number {
text-align: right;
}
/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
max-width: 800px;
margin: 0 auto;
}
table.rg-table {
width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
display: none;
}
table.rg-table thead {
display: none;
}
table.rg-table tbody {
width: 100%;
}
table.rg-table tr, table.rg-table th, table.rg-table td {
display: block;
padding: 0;
}
table.rg-table tr {
border-bottom: none;
margin: 0 0 1em 0;
padding: 0.5em;
}
table.rg-table tr.highlight {
background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
background-color: none;
}
table.rg-table td {
padding: 0.5em 0 0.25em 0;
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.rg-table td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
margin-right: 0.5em;
font-size: 0.95em;
}
table.rg-table td:last-child {
padding-right: 0;
border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
display: none;
}
table.rg-table .highlight td {
background-color: inherit;
font-weight: normal;
}
4 个解决方案
解决方案1
0 2017-11-16 01:30:12
Not sure if this is what you're after. 不确定这是否是您要的。 I made a separate table just for the head. 我为头做了一张单独的桌子。 (This is not for mobile, correct?) This is tricky because you'll probably have to set exact widths for all columns. （这不是针对移动设备，对吗？）这很棘手，因为您可能必须为所有列设置确切的宽度。 https://codepen.io/wazz/pen/POJmzr?editors=1100 . https://codepen.io/wazz/pen/POJmzr?editors=1100 。
<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>
<div class='rg-container'>
<table class='rg-table'>
<thead>
<tr>
<th class='text '>id </th>
<th class='text '>somcol</th>
<th class='text '>biggger id</th>
<th class='text '>another id</th>
<th class='text '>med col</th>
<th class='text '>med col</th>
<th class='text '>sheet</th>
<th class='text '>sheet</th>
<th class='text '>another big coloumn</th>
<th class='text '>small</th>
<th class='text '>another big coloumn</th>
<th class='text '>date format</th>
<th class='text '>date format</th>
<th class='text '>small col</th>
<th class='text '>date format</th>
<th class='text '>a very big columnssssss</th>
<th class='text '>medium clolumnss</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class='rg-content'>
<table class='rg-table'>
<tbody>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='another big coloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='another big coloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
<tr class=''>
<td class='text ' data-title='id'>id</td>
<td class='text ' data-title='somcol'>somcol</td>
<td class='text ' data-title='biggger id'>biggger id</td>
<td class='text ' data-title='another id'>another id</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='med col'>med col</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='sheet'>sheet</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='small col'>small col</td>
<td class='text ' data-title='dateformat'>date format</td>
<td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
</tbody>
</table>
</div>
</div>
css 的CSS
.rg-container {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
color: #222;
}
.rg-content {
height: 300px;
overflow: scroll;
}
.rg-header {
margin-bottom: 1em;
text-align: left;
}
.rg-header > * {
display: block;
}
/* table */
table.rg-table {
width: 100%;
margin-bottom: 0.5em;
font-size: 1em;
border-collapse: collapse;
border-spacing: 0;
overflow:scroll;
}
table.rg-table tr {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: left;
color: #333;
}
table.rg-table thead {
border-bottom: 3px solid #ddd;
background:black;
}
table.rg-table tr {
border-bottom: 1px solid #ddd;
color: #222;
}
table.rg-table tr.highlight {
background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table th {
font-weight: bold;
padding: 0.35em;
font-size: 0.9em;
color:white;
border:1px solid #ccc;
}
table.rg-table td {
padding: 0.35em;
font-size: 0.9em;
border:1px solid #ccc;
}
table.rg-table .highlight td {
font-weight: bold;
}
table.rg-table th.number, td.number {
text-align: right;
}
/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
max-width: 800px;
margin: 0 auto;
}
table.rg-table {
width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
display: none;
}
table.rg-table thead {
display: none;
}
table.rg-table tbody {
width: 100%;
}
table.rg-table tr, table.rg-table th, table.rg-table td {
display: block;
padding: 0;
}
table.rg-table tr {
border-bottom: none;
margin: 0 0 1em 0;
padding: 0.5em;
}
table.rg-table tr.highlight {
background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
background-color: none;
}
table.rg-table td {
padding: 0.5em 0 0.25em 0;
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.rg-table td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
margin-right: 0.5em;
font-size: 0.95em;
}
table.rg-table td:last-child {
padding-right: 0;
border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
display: none;
}
table.rg-table .highlight td {
background-color: inherit;
font-weight: normal;
}
解决方案2
0 2017-11-16 02:42:49
you r doing great but I think u missed somethings like: 你做得很好，但我想你错过了一些事情：
you should put the whole thing in a div (container), and of course giving a fixed size to the container.
您应该将整个东西放在一个div（容器）中，当然要给容器一个固定的大小。 the header and the content should be at separated divs and tables.
标头和内容应位于分开的div和表中。 you must put (display: flex; flex-direction: column;height: 100%;) in the class of containing div(of the two tables,rg-container in your code)
您必须将（display：flex; flex-direction：column; height：100％;）放在包含div（两个表中的两个，在代码中为rg-container）的类中 you also must put (overflow-y: scroll;)in the class of container div of the second table.
您还必须将（overflow-y：scroll;）放在第二个表的容器div类中。
So your code will be like this: 因此，您的代码将如下所示：
.rg-container { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; margin: 0; padding: 1em 0.5em; color: #222; display: flex; flex-direction: column; height: 100%; } .container { background: tan; width: 100%; padding: 4px; height: 300px; box-sizing: border-box; } .rg-header { margin-bottom: 1em; text-align: left; } .rg-body{overflow-y: scroll;} .rg-header > * { display: block; } /* table */ table.rg-table { width: 100%; margin-bottom: 0.5em; font-size: 1em; border-collapse: collapse; border-spacing: 0; overflow:scroll; } table.rg-table tr { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-align: left; color: #333; } table.rg-table thead { border-bottom: 3px solid #ddd; background:black; } table.rg-table tr { border-bottom: 1px solid #ddd; color: #222; } table.rg-table tr.highlight { background-color: #dcf1f0 !important; } table.rg-table.zebra tr:nth-child(even) { background-color: #f6f6f6; } table.rg-table th { font-weight: bold; padding: 0.35em; font-size: 0.9em; color:white; } table.rg-table td { padding: 0.35em; font-size: 0.9em; } table.rg-table .highlight td { font-weight: bold; } table.rg-table th.number, td.number { text-align: right; } /* media queries */ @media screen and (max-width: 800px) { .rg-container { max-width: 800px; margin: 0 auto; } table.rg-table { width: 100%; } table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile { display: none; } table.rg-table thead { display: none; } table.rg-table tbody { width: 100%; } table.rg-table tr, table.rg-table th, table.rg-table td { display: block; padding: 0; } table.rg-table tr { border-bottom: none; margin: 0 0 1em 0; padding: 0.5em; } table.rg-table tr.highlight { background-color: inherit !important; } table.rg-table.zebra tr:nth-child(even) { background-color: none; } table.rg-table.zebra td:nth-child(even) { background-color: #f6f6f6; } table.rg-table tr:nth-child(even) { background-color: none; } table.rg-table td { padding: 0.5em 0 0.25em 0; border-bottom: 1px dotted #ccc; text-align: right; } table.rg-table td[data-title]:before { content: attr(data-title); font-weight: bold; display: inline-block; content: attr(data-title); float: left; margin-right: 0.5em; font-size: 0.95em; } table.rg-table td:last-child { padding-right: 0; border-bottom: 2px solid #ccc; } table.rg-table td:empty { display: none; } table.rg-table .highlight td { background-color: inherit; font-weight: normal; } }
<h1>Some more Header information</h1> <h2>Some more Header information</h2> <h3>Header</h3> <div class="container"> <div class='rg-container'> <div class='rg-content'> <table class='rg-table'> <thead> <tr> <th class='text '>id </th> <th class='text '>somcol</th> <th class='text '>biggger id</th> <th class='text '>another id</th> <th class='text '>med col</th> <th class='text '>med col</th> <th class='text '>sheet</th> <th class='text '>sheet</th> <th class='text '>anotherbigcoloumn</th> <th class='text '>small</th> <th class='text '>anotherbigcoloumn</th> <th class='text '>dateformat</th> <th class='text '>dateformat</th> <th class='text '>small col</th> <th class='text '>dateformat</th> <th class='text '>averybigcolumnssssss</th> <th class='text '>mediumclolumnss</th> </tr> </thead> <tbody> </table> </div> <div class="rg-body"> <table> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> <tr class=''> <td class='text ' data-title='id'>id</td> <td class='text ' data-title='somcol'>somcol</td> <td class='text ' data-title='biggger id'>biggger id</td> <td class='text ' data-title='another id'>another id</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='med col'>med col</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='sheet'>sheet</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='small'>small</td> <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='small col'>small col</td> <td class='text ' data-title='dateformat'>date format</td> <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td> <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td> </tr> </tbody> </table> </div> </div> </div>
解决方案3
0 2017-11-16 07:02:20
If you're looking for pure CSS (No JS) solution + and table cells have dynamic width + and you want to have a fixed header = not possible (unfortunately). 如果您正在寻找纯CSS（No JS）解决方案+并且表格单元格具有动态宽度+，并且您想要一个固定的标头= 不可能 （不幸的是）。
Either make the width of the cells fixed, or use Javascript/jQuery to change the width of the header on window resize, or give up on having fixed header. 要么使单元格的宽度固定，要么使用Javascript / jQuery在窗口调整大小时更改标题的宽度，或者放弃具有固定标题的样式。
解决方案4
0 已采纳 2017-11-16 09:35:29
After trial and error I created this html table . 经过反复试验，我创建了这个html表。 which is responsive and table head is fixed 反应灵敏且固定表头
https://codepen.io/shaswat/pen/bYoagm https://codepen.io/shaswat/pen/bYoagm
HTML 的HTML
<div class="gridContainer"><h1 class='deepshadow'>Table Fixed header Plus Responsive table</h1>
<div class="tableWrapper">
<div class="tableWrapper__head">
<table class="responsiveTableLayout">
<thead>
<tr>
<th>small_1</th>
<th>small_2</th>
<th>Medium_1</th>
<th>Medium_2</th>
<th>Medium_3</th>
<th>Medium_4</th>
<th>Medium_5</th>
<th>BigColumn_1</th>
<th>BigColumn_2</th>
</tr>
</thead>
</table>
</div>
<div class="tableWrapper__body">
<table class="responsiveTableLayout">
<tbody>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_1'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS 的CSS
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 20px;
padding: 12px 12px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
h1.deepshadow {
color: #e0dfdc;
background-color: #333;
letter-spacing: .1em;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 1px 0 #2c2c2c, 0 2px 0 #2a2a2a, 0 2px 0 #282828, 0 2px 0 #262626, 0 2px 0 #242424, 0 2px 0 #222, 0 4px 0 #202020, 0 4px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
background: white;
}
td, th {
border: 1px solid lightgray;
padding: 2px;
text-align: left;
}
td:first-child {
width: 75px;
}
td:nth-child(2) {
width: 75px;
}
td:last-child {
text-align: right;
width: 120px;
}
th:first-child {
width: 75px;
}
th:nth-child(2) {
width: 75px;
}
th:last-child {
text-align: right;
width: 135px;
}
th {
background: #333;
color: white;
text-transform: uppercase;
font-weight: normal;
height:30px;
}
table tr:first-child td {
border-top: none;
}
.gridContainer {
background: #ccc;
width: 100%;
padding: 4px;
box-sizing: border-box;
}
.tableWrapper {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.tableWrapper__head{
}
.tableWrapper__body {
max-height :300px;
overflow-y: scroll;
}
/* media queries */
@media screen and (max-width: 1000px) {
.gridContainer {
max-width: 1000px;
margin: 0 auto;
}
table.responsiveTableLayout {
width: 100%;
}
table.responsiveTableLayout thead {
display: none;
}
table.responsiveTableLayout tbody {
width: 100%;
}
table.responsiveTableLayout tr, table.responsiveTableLayout th, table.responsiveTableLayout td {
display: block;
padding: 0;
}
table.responsiveTableLayout th:nth-child(n), table.responsiveTableLayout td:nth-child(n) {
width:auto;
}
table.responsiveTableLayout tr {
border-bottom: none;
margin: 0 0 10px 0;
/*padding: 1px;*/
}
table.responsiveTableLayout td {
/*padding: 4px 0 4px 0;*/
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.responsiveTableLayout td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
color:teal;
/*margin-right: 0.5em;
font-size: 0.95em;*/
}
table.responsiveTableLayout td:last-child {
padding-right: 0;
padding-bottom:5px;
border-bottom: 2px solid #ccc;
}
table.responsiveTableLayout td:empty {
display: none;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何制作具有固定标题的兼容可滚动表 - How to make a compatible scrollable table with fixed header
如何将表中每个标题单元格的宽度（带有固定标题）设置为与其列中的最大单元格相同，并使浏览器尊重它？ - How to set the width of each header cell in a table (with fixed header) to be the same to the biggest in its column, and make the browser respect it?
如何在html5中使表响应？ - How to make table responsive in html5?
如何使列表制成的html表响应？ - How to make html table made by list responsive?
无法为表格制作固定标题 - Unable to make fixed header for table
使第二个表头固定 - Make second table header is fixed
试图在HTML中制作固定表格标题，滚动和可见性问题？ - Trying to make fixed table header in HTML, scroll and visibility issues?
如何使用固定标题使html表可滚动？ - How to make html table scrollable with fixed headers?
具有固定标题和固定列的HTML数据表 - HTML Data Table with fixed header and fixed column
具有固定列表的固定标题不响应宽度 - Fixed header with fixed column table is not responsive according to width
相关标签