jquery - 使用 Div 的表结构

Question

我想创建具有固定标题和自动表格宽度的垂直和水平滚动表格。但这很难实现，这就是我尝试使用 div 来实现的原因。我为此编写了以下代码。 My code

body {
  background: #20262E;
  padding: 20px;
  color:#fff;
  font-family: Helvetica;
}

.tableContainer{
  border:1px solid #fff;
  
}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;
  
}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;
    
}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;
    
}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

<div class="tableContainer">
  <div class="tableheader">
     <div class="tablerow">
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
  </div>
  <div class="tableBody">
     <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
  </div>
</div>

.tableContainer{ border:1px 实心#fff;

}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;

}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;

}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;

}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

现在我面临水平滚动和列宽的问题。

或者

这是我的另一个代码 second code .在这段代码中，我遇到了水平滚动的问题。

请帮我解决这个问题。

Answer 1

.table header add margin-right:17px;

17px 是滚动条的宽度