Question

我有这段代码：

.outer {
  width: 100%;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
}
.TFtable{
  width: 100%;
  border-collapse: collapse;
}
.TFtable td {
  padding:7px; border:#4e95f4 1px solid;
}
.TFtable tr {
  background: #b8d1f3;
}
.TFtable tr:nth-child(odd) {
  background: #b8d1f3;
}
.TFtable tr:nth-child(even) {
  background: #dae5f4;
}

格式化HTML表格。然而，这张桌子被打破了＃34;关于窗口宽度，因为它太大，但没有显示水平滚动条。

这是怎么回事？

编辑（HTML code）：

  <body>
  <div class="mainbar">Sequentia Biotech Variant Query</div>
  <div class="outer">
  <table class="TFtable">
    <tr>
      <td>ID</td>
      <td>Chromosome</td>
      <td>Position</td>
      <td>001</td>
      <td>002</td>
    </tr>
  <% for(var i=0; i < data.length; i++) { %>
     <tr>
      <td><%= data[i].id %></td>
      <td><%= data[i].chr %></td>
      <td><%= data[i].pos %></td>
      <td><%= data[i].g001 %></td>
      <td><%= data[i].g002 %></td>
     </tr>
  <% } %>
  </table>
  </div>
  </body>

水平滚动未显示

0 个答案: