如何使用CSS使我的表水平滚动? (除了垂直)

时间:2017-06-10 23:09:03

标签: css

<tbody>垂直滚动,<thead>保持不变。现在我想让整个表格水平滚动。问题是,一旦我在包含<div>上设置宽度,它就会中断,可能是因为<td>display: inline-block。有什么建议吗?

这里工作正常,没有表格的设定宽度:

&#13;
&#13;
html,
body {
  margin: 0;
}

div {
/*   width: 500px; */
}

table {
  height: 300px;
  display: block;
  border-collapse: collapse;
  overflow: hidden;
}

thead,
tbody {
  display: table;
  table-layout: fixed;
}

tbody {
  height: 100%;
  overflow: auto;
  display: block;
}

th,
td {
  width: 150px;
  overflow-x: hidden;
  display: inline-block;
}
&#13;
<div>
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>first_name</th>
        <th>last_name</th>
        <th>email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
    </tbody>
  </table>
</div>
&#13;
&#13;
&#13;

这就是我在包含<div>

时设置宽度的时候

&#13;
&#13;
html,
body {
  margin: 0;
}

div {
  width: 500px;
}

table {
  height: 300px;
  display: block;
  border-collapse: collapse;
  overflow: hidden;
}

thead,
tbody {
  display: table;
  table-layout: fixed;
}

tbody {
  height: 100%;
  overflow: auto;
  display: block;
}

th,
td {
  width: 150px;
  overflow-x: hidden;
  display: inline-block;
}
&#13;
<div>
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>first_name</th>
        <th>last_name</th>
        <th>email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ralph</td>
        <td>Wright</td>
        <td>rwright0@indiatimes.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Walter</td>
        <td>Sullivan</td>
        <td>wsullivan1@photobucket.com</td>
      </tr>
    </tbody>
  </table>
</div>
&#13;
&#13;
&#13;

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

对于表格,请保持显示:阻止和编辑溢出,如下所示:

table {
        display: block;
        overflow-x: auto;
    }

到你的桌子。