带有可滚动正文和固定标题的表格

Question

我正在尝试创建一个带有固定标题和可滚动正文的表格，我尝试了几乎所有堆栈溢出解决方案，但没有任何效果。 文本到处都重叠，并且标题与其他行不对齐，如您在附图中所见 table screenshot

这是我的代码

<style>
table {
  max-width:980px;
  table-layout:fixed;
  margin:auto;
}
th, td {
  padding:5px 10px;
  border:1px solid #000;
}
thead, tfoot {
  background:#f9f9f9;
  display:table;
  width:100%;
  width:calc(100% - 18px);
}
tbody {
  height:300px;
  overflow:auto;
  overflow-x:hidden;
  display:block;
  width:100%;
}
tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;
}
</style>

<div style="margin-left: 200px; padding-top: 50px;">
  <h1>Id  : <%= @account["id"]%></h1>
  <h1>Status : <%=@account["status"]%></h1>
  <table>
    <thead>
    <tr>
      <th>Document</th>
      <th>Primary Index</th>
      <th>Primary Alias</th> 
      <th>Primary Cluster</th>
      <th>Secondary Index</th>
      <th>Secondary Alias</th> 
      <th>Secondary Cluster</th>
    </tr>
  </thead>
  <tbody>
    <% @account["account_routes"].each do |route| %>
      <tr>
        <td><%=route["document"]%></td> 
        <td><%=route["primary"]["index"]%></td>
        <td><%=route["primary"]["alias"]%></td>
        <td><%=route["primary"]["cluster"]%></td> 
        <td><%=route["secondary"]["index"]%></td>
        <td><%=route["secondary"]["alias"]%></td>
        <td><%=route["secondary"]["cluster"]%></td> 
      </tr>
    <% end %>
  </tbody>
  </table>

Answer 1

你几乎拥有它。您的标题需要与列的宽度相同（包括正文中添加的滚动条），以便与列对齐。

我给th, td添加了一个宽度

width:calc(100%/7);

在此处查看fiddle，按预期工作