Question

我正在尝试使用修复标头和可滚动的主体创建一个表，我尝试了几乎所有来自堆栈溢出的解决方案但没有任何效果。文本在任何地方都会重叠，并且标题不会与其他行对齐，如附图所示 table screenshot

这是我的代码

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 1

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

我在th, td

添加了一个宽度

width:calc(100%/7);

请参阅此处的fiddle按预期工作

带有可滚动主体和导轨中固定头的表

1 个答案: