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

时间：2017-11-15 22:59:45

标签： jquery html css html5 html-table

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

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

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

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

4 个答案:

答案 0 :(得分：0)

不确定这是否是你所追求的。我为头部做了一个单独的桌子。 （这不适用于移动设备，对吗？）这很棘手，因为您可能需要为所有列设置精确的宽度。 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 

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

答案 1 :(得分：0)

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

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

  • 标题和内容应位于分隔的div和表格中。

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

    < / LI>

  • 你还必须把（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;
}
}
<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>

答案 2 :(得分：0)

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

使单元格的宽度固定，或者使用Javascript / jQuery在窗口大小调整时更改标题的宽度，或者放弃具有固定标题。

答案 3 :(得分：0)

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

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

HTML 

getSlugAttribute($value)

CSS 

<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>
相关问题
最新问题