表格的CSS固定标题，不指定宽度

Question

我进行了很多次搜索，以找到正确的解决方案，使我们在向下滚动正文（tbody）部分时使表头（thead）固定。 那里有很多解决方案，但是没有任何帮助。

一些尝试过的链接：

• 如何使用CSS制作具有固定标题的可滚动表格
• https://jsfiddle.net/dPixie/byB9d/3/
• http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

大多数链接为每个tr td使用固定宽度，但是我需要不为元素指定任何宽度，因为表格是动态生成的。 标题和内容可能长或短，因此宽度取决于内容。

还有其他解决方案可以使th和td正确对齐吗？

 .fixed_headers { width: 100%; table-layout: fixed; border-collapse: collapse; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; max-height: 200px; } 

 <table class="fixed_headers" border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Lorem Ipsums</th> <th>ipsum dolor sit amet</th> <th>consectetur adipiscing</th> <th>do eiusmod tempor incididunt</th> </tr> </thead> <tbody> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> </tbody> </table> 

Answer 1

您可以使用position:sticky的固定标题

• 用要固定的高度的relative div包裹table 。
• 将“ th”指定为sticky 。 因为粘性仅适用于表内的th和td
• 为th提供背景颜色，否则它将显示为透明。
• 一旦标头固定在顶部（由于某些原因，我不知道），在th指定的CSS边框就会消失。

 .fixed-headers { width: 100%; position: relative; overflow-y: scroll; height: 300px; } .fixed-headers table { table-layout: fixed; width: 100%; } .fixed-headers thead tr th { position: sticky; top: 0px; background-color: white; } 

 <div class="fixed-headers"> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Lorem Ipsums</th> <th>ipsum dolor sit amet</th> <th>consectetur adipiscing</th> <th>do eiusmod tempor incididunt</th> </tr> </thead> <tbody> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> </tbody> </table> </div> 

Answer 2

这不是最好的方法，但是您可以在表头中强制前三列的宽度，在表主体中强制第一行的单元格的宽度。 您将需要提供有关列布局方式的一些启发。

我修改了在Google上找到的样式表 。

我在下面添加了一个可选的JavaScript脚本，用于计算列的宽度，以防您不想显式设置它们。

 var cols = document.querySelectorAll('.fixed-header tr th'), rows = document.querySelectorAll('.scroll-content tr'), numOfCols = cols.length, // Number for columns in table colRatio = 100 / numOfCols, // Percentage width of a single column scrollWidth = 18, // Width of the scroll bar tableWidth = document.querySelector('.table-container').clientWidth, widthDiff = percentDiff(tableWidth, tableWidth + scrollWidth, numOfCols); cols.forEach((col, index) => { if (index < numOfCols - 1) { col.setAttribute('width', (colRatio - widthDiff) + '%'); } }); rows.forEach((row, i) => { if (i === 0) { row.querySelectorAll('td').forEach((cell, j) => { if (j < numOfCols - 1) { cell.setAttribute('width', colRatio + '%'); } }); } row.className += (i % 2 === 1) ? ' alternate-row' : 'normal-row'; }); function percentDiff(n, m, p) { return (Math.abs(n - m) / ((n + m) / 2) * 100) / p; } 

 /* define height and width of scrollable area. Add 16px to width for scrollbar */ div.table-container { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 618px; /* Add width for scrollbar */ } /* Reset overflow value to hidden for all non-IE browsers. */ html>body div.table-container { overflow: hidden; width: 600px; /* Width of the table */ } /* define width of table. IE browsers only */ div.table-container table { float: left; /* width: 740px */ } /* define width of table. Add 16px to width for scrollbar. */ /* All other non-IE browsers. */ html>body div.table-container table { /* width: 756px */ } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixed-header tr { position: relative; } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* make the TH elements pretty */ thead.fixed-header th { background: #C96; border-left: 1px solid #EB8; border-right: 1px solid #B74; border-top: 1px solid #EB8; font-weight: normal; padding: 4px 3px; text-align: left } html>body tbody.scroll-content { display: block; height: 262px; overflow: auto; width: 100% } html>body thead.fixed-header { display: table; overflow: auto; width: 100% } /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scroll-content td, tbody.scroll-content tr.normal-row td { background: #FFF; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } tbody.scroll-content tr.alternate-row td { background: #EEE; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } 

 <div class="table-container"> <table border="0" cellpadding="0" cellspacing="0" class="scroll-table"> <thead class="fixed-header"> <tr> <!-- width="24.667px" --> <th>Lorem Ipsums</th> <!-- width="24.667px" --> <th>ipsum dolor sit amet</th> <!-- width="24.667px" --> <th>consectetur adipiscing</th> <th>do eiusmod tempor incididunt</th> </tr> </thead> <tbody class="scroll-content"> <tr> <!-- width="25px" --> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <!-- width="25px" --> <td>accusantium doloremque laudantium</td> <!-- width="25px" --> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>quis nostrum exercitationem</td> </tr> <tr> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> <td>accusantium doloremque laudantium</td> <td>consequuntur magni dolores eos qui ratione voluptatem</td> <td>quis nostrum exercitationem</td> </tr> </tbody> </table> </div>