使用两个表显示溢出表

Question

我在网上寻找解决方案。我不想使用jQuery我想使用纯css。其中一个解决方案是使用两个表。由于tr并未在整个屏幕上展开，因此th和td不会排成一行。

#regionItemListing {
 height: 100% !important;
 min-height: 557px;
 max-height: 557px;
 /*overflow: auto;*/
 /*panel style*/
 padding-bottom: 12px;
 background-color: #ffffff;
 border: 1px solid #dddddd;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 /*Fix margin left*/
 margin-left: 5px;
 margin-right: 0px;
 width: 78%;}

#regionItemListing thead, tbody {
    display: block;
}



#regionItemListing tbody {
    height: 17% !important;
    min-height: 507px;
    max-height: 507px;
    overflow: auto;
}

Answer 1

你的问题很难理解，但是通过使用两个表格，你的表格标题和表格数据将无法匹配，除非你给它们一个标准的宽度：

将两个表放在div中，ID为＃34; myID＆＃34; 然后添加如下所示的css：

#myID {
  width: 500px;
}
table {
  width: 100%;
}
th {
   width: 10%;
}
td {
   width: 10%;
}

看看是否有帮助。