如何在同一个html表上修复响应式表和标题

这是代码笔https://codepen.io/shaswat/pen/EbwPNK

1. 我通过使所有列重复并在移动显示时显示相应的行值来响应html表 – 因此响应部分已完成

2. 现在无法在滚动tbody时在此html表中修复标题 – 因此tbody可以具有固定的高度，并且滚动标题的时间应该是固定的 – 仅适用于大于移动显示的分辨率 – 需要帮助

HTML

Some more Header information
 
Some more Header information
 
Header
 
 
 
 
 
 
id 
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
anotherbigcoloumn
 
small
 
anotherbigcoloumn
 
dateformat
 
dateformat
 
small col
 
dateformat
 
averybigcolumnssssss
 
mediumclolumnss
 
 
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
 
  

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; } 

Answer 1

不确定这是不是你想要的。 我为头部做了一个单独的桌子。 （这不适用于移动设备，对吗？）这很棘手，因为您可能需要为所有列设置精确的宽度。 https://codepen.io/wazz/pen/POJmzr?editors=1100 。

 
Some more Header information
 
Some more Header information
 
Header
 
 
 
 
 
id 
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
 
 
 
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
 
  

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; } 

Answer 2

你做得很棒，但我想你错过了一些事情：

• 你应该把整个东西放在一个div（容器）中，当然给容器一个固定的大小。

• 标题和内容应该在分隔的div和表中。

• 你必须把（显示：flex; flex-direction：column; height：100％;）放在包含div的类中（两个表中的rg-container）

• 你还必须把（overflow-y：scroll;）放在第二个表的容器div的类中。

所以你的代码将是这样的：

 .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; } } 

 
Some more Header information
 
Some more Header information
 
Header
 
 
 
 
 
 
 
id 
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
anotherbigcoloumn
 
small
 
anotherbigcoloumn
 
dateformat
 
dateformat
 
small col
 
dateformat
 
averybigcolumnssssss
 
mediumclolumnss
 
 
 
 
 
 
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
 
 
id
 
somcol
 
biggger id
 
another id
 
med col
 
med col
 
sheet
 
sheet
 
another big coloumn
 
small
 
another big coloumn
 
date format
 
date format
 
small col
 
date format
 
a very big columnssssss
 
medium clolumnss
 
  
 
 
  

Answer 3

如果您正在寻找纯CSS（无JS）解决方案+并且表格单元格具有动态宽度+并且您希望有一个固定的标头= 不可能 （不幸的是）。

要么修复单元格的宽度，要么使用Javascript / jQuery来更改窗口大小调整时标题的宽度，或者放弃修复标题。

Answer 4

经过反复试验后，我创建了这个html表。 响应和桌头是固定的

https://codepen.io/shaswat/pen/bYoagm

HTML

 
Table Fixed header Plus Responsive table
 
 
 
 
 
 
small_1
 
small_2
 
Medium_1
 
Medium_2
 
Medium_3
 
Medium_4
 
Medium_5
 
BigColumn_1
 
BigColumn_2
 
 
 
 
 
 
 
 
 
1
 
1
 
Some values
 
Some values
 
Some values
 
Some values
 
Some values
 
Big Value
 
Big Value
 
 
 
1
 
1
 
Some values
 
Some values
 
Some values
 
Some values
 
Some values
 
Big Value
 
Big Value
 
 
 
1
 
1
 
Some values
 
Some values
 
Some values
 
Some values
 
Some values
 
Big Value
 
Big Value
 
 
 
1
 
1
 
Some values
 
Some values
 
Some values
 
Some values
 
Some values
 
Big Value
 
Big Value
 
 
 
1
 
1
 
Some values
 
Some values
 
Some values
 
Some values
 
Some values
 
Big Value
 
Big Value
 
 
 
 
 
  

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; } }