水平滚动表

Question

我正在responsive design for html wide table 中重现我的问题。基本上我有一张很宽的桌子，桌子将放在一个十列宽的 div 内（我在这里使用引导程序）。问题是 表格的主体由主体宽度限制，其余部分被截断，当我向右滚动表格时，我只能看到标题并且主体为空。

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

 .ten.columns {
    width: 82.6666666667%;
  }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
    min-width: 100%;
    display: block;
    overflow-x: scroll;
}
table thead, table tbody {
    display: block;
}
table tbody {
    max-height: 307px;
    overflow-y: scroll;
    overflow-x: hidden;
}
table tbody tr:hover {
    background-color: #ddd;
}
table th, table td {
  min-width: 150px;
  max-width: 150px;
  padding: 2px 3px;
  text-align: left;
  overflow:hidden;
  text-overflow: ellipsis;
  border: 1px solid #e1e1e1;
}
table th:first-child,
table td:first-child {
  min-width:200px;
  padding-left: 4px;
}
table th:last-child,
table td:last-child {
  padding-right: 4px;
}

<div class='row ten columns offset-by-one'>
  <table>
      <thead>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
              <th>Column 6</th>
              <th>Column 7</th>
              <th>Column 8</th>
              <th>Column 9</th>
              <th>Column 10</th>
              <th>Column 11</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
              <td>Row 1</td>
          </tr>
          <tr>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
              <td>Row 2</td>
          </tr>
          <tr>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
              <td>Row 3</td>
          </tr>
          <tr>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
              <td>Row 4</td>
          </tr>
          <tr>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
              <td>Row 5</td>
          </tr>
          <tr>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
              <td>Row 6</td>
          </tr>
          <tr>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
              <td>Row 7</td>
          </tr>
          <tr>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
              <td>Row 8</td>
          </tr>
          <tr>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
              <td>Row 9</td>
          </tr>
          <tr>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
              <td>Row 10</td>
          </tr>
          <tr>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
              <td>Row 11</td>
          </tr>
      </tbody>
  </table>
</div>  

Answer 1

改变这个：

table thead, table tbody {
    display: block;
}

到：

table thead, table tbody {
    display: inline-block;
}

您也可以将其更改为display: inline 或display: table，它会正常工作。

Here 有一个关于display: table、display: inline、display: block 和display: inline-block 之间区别的简短回答：