如何使响应表和标题在相同的html表上都固定 [英] How to make responsive table and header fixed both on same html table
本文介绍了如何使响应表和标题在相同的html表上都固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是代码笔 https://codepen.io/shaswat/pen/EbwPNK
-
我做了一个html表格，通过让所有列重复显示相应的行值，显示 - 所以响应部分已完成
-
现在无法在滚动tbody的同时在此html表中固定标题 - 因此tbody可以具有固定高度并且时间滚动标题应该是固定的 - 仅适用于大于移动显示的分辨率
- 需要在此帮助
HTML
< h1>更多标头资讯< / h1>
< h2>更多标题信息< / h2>
< h3>标头< / 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>>另一个ID< / th>
< th class ='text> med col< / th>
< th class ='text> med col< / th>
< th class ='text'>表< / th>
< th class ='text'>表< / 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> averybigcolumnssssss< / th>
< th class ='text> mediumcollumnss< / 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'>另一大彩色< / td>
< td class ='text'data-title ='small'>小< / td>
< td class ='text'data-title ='anotherbigcoloumn'>另一大彩色< / td>
< td class ='text'data-title ='dateformat'>日期格式< / td>
< td class ='text'data-title ='dateformat'>日期格式< / td>
< td class ='text'data-title ='small col'> small col< / td>
< td class ='text'data-title ='dateformat'>日期格式< / td>
< td class ='text'data-title ='averybigcolumnssssss'>一个非常大的columnssssss< / td>
< td class ='text'data-title ='mediumclolumnss'> medium clolumnss< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
CSS
.rg-container {
font-family：'Lato'，Helvetica，Arial，sans-serif;
font-size：16px;
line-height：1.4;
保证金：0;
填充：1em 0.5em;
颜色：＃222;
}
.rg-header {
margin-bottom：1em;
text-align：left;
}
.rg-header> * {
display：block;
}
/ *表* /
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;
保证金：0;
padding：0;
border：0;
font-size：100％;
字体：继承;
vertical-align：baseline;
text-align：left;
颜色：＃333;
}
table.rg-table thead {
border-bottom：3px solid #ddd;
背景：黑色;
}
table.rg-table tr {
border-bottom：1px solid #ddd;
颜色：＃222;
}
table.rg-table tr.highlight {
background-color：＃dcf1f0！important;
}
table.rg-table.zebra tr：nth-child（偶数）{
background-color：＃f6f6f6;
}
table.rg-table th {
font-weight：bold;
填充：0.35em;
font-size：0.9em;
颜色：白色;
}
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;
$ b / *媒体查询* /
@media屏幕和（最大宽度：800px）{
.rg-container {
max-宽度：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;
保证金：0 0 1em 0;
填充：0.5em;
}
table.rg-table tr.highlight {
background-color：inherit！important;
}
table.rg-table.zebra tr：nth-child（偶数）{
background-color：none;
}
table.rg-table.zebra td：nth-child（偶数）{
background-color：＃f6f6f6;
}
table.rg-table tr：nth-child（偶数）{
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;
保证金 - 右：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;
}
解决方案
这个html表格。这是响应和表头是固定的
https ：//codepen.io/shaswat/pen/bYoagm
HTML
< div class =gridContainer>< h1 class ='deepshadow'>表固定标头Plus响应表< / 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>
第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'>一些值< / td>
< td data-title ='Medium_2'>一些值< / td>
< td data-title ='Medium_3'>一些值< / td>
< td data-title ='Medium_4'>一些值< / td>
< td data-title ='Medium_5'>有些值< / 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'>一些值< / td>
< td data-title ='Medium_2'>一些值< / td>
< td data-title ='Medium_3'>一些值< / td>
< td data-title ='Medium_4'>一些值< / td>
< td data-title ='Medium_5'>有些值< / 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'>一些值< / td>
< td data-title ='Medium_2'>一些值< / td>
< td data-title ='Medium_3'>一些值< / td>
< td data-title ='Medium_4'>一些值< / td>
< td data-title ='Medium_5'>有些值< / 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'>一些值< / td>
< td data-title ='Medium_2'>一些值< / td>
< td data-title ='Medium_3'>一些值< / td>
< td data-title ='Medium_4'>一些值< / td>
< td data-title ='Medium_5'>有些值< / 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'>一些值< / td>
< td data-title ='Medium_2'>一些值< / td>
< td data-title ='Medium_3'>一些值< / td>
< td data-title ='Medium_4'>一些值< / td>
< td data-title ='Medium_5'>有些值< / td>
< td data-title ='BigColumn_1'> Big Value< / td>
< td data-title ='BigColumn_2'> Big Value< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
< / div>
CSS
h1 {
font-family：Avant Garde，Avantgarde，世纪哥特，CenturyGothic，AppleGothic，无衬线;
font-size：20px;
padding：12px 12px;
text-align：center;
text-transform：大写;
text-rendering：optimizeLegibility;
}
h1.deepshadow {
color：＃e0dfdc;
背景颜色：＃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）;
}
表{
border-collapse：collapse;
table-layout：fixed;
宽度：100％;
背景：白色;
}
td，th {
border：1px solid lightgray;
padding：2px;
text-align：left;
}
td：first-child {
width：75px;
}
td：nth-child（2）{
width：75px;
}
td：最后一个孩子{
text-align：right;
width：120px;
}
th：第一个孩子{
width：75px;
}
th：nth-child（2）{
width：75px;
}
th：最后一个孩子{
text-align：right;
width：135px;
}
th {
background：＃333;
颜色：白色;
text-transform：大写;
font-weight：normal;
height：30px;
}
表tr：第一胎儿td {
border-top：none;
}
.gridContainer {
background：#ccc;
宽度：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屏幕和（最大宽度：1000px）{
.gridContainer {
最大宽度： 1000像素;
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;
保证金：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;
颜色：蓝绿色;
/ * 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;
}
}
Here is the code pen 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
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
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
.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;
}
解决方案
After trial and error I created this html table . which is responsive and table head is fixed
https://codepen.io/shaswat/pen/bYoagm
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
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;
}
}
这篇关于如何使响应表和标题在相同的html表上都固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
