CSS - 当列具有手动设置的宽度

时间：2018-04-11 18:04:25

标签： html css html-table

我需要一个带有粘性标题的表格，它也会以较小的屏幕尺寸从左向右滚动。

我认为这是使用thead和tbody在tbody上设置display: block;和overflow-y: scroll;的最佳方法。

这个问题是我必须设置所有th和td的宽度，我也设置了表格的宽度。

设置th和td的宽度很好但是在表格上设置宽度意味着我可以在右边的表格后面留出空格，除非我用列的宽度来计算表格的宽度。

＆＃13;
＆＃13; 
body {
  background: grey;
  font-family: sans-serif;
}

.page {
  background: white;
  width: 800px;
  margin: 0 auto;
}

.table-con {
  overflow: scroll;
  width: 800px;
  height: 500px;
}

thead th,
tbody td {
  border: 1px solid red;
}

table {
  border-collapse: collapse;
  width: 1500px;
}

thead th:first-child {
  width: 20px;
  padding: 0;
}

th {
  text-align: left;
}

thead {
  border-bottom: 5px solid red;
}

thead tr {
  display: block;
  position: relative;
}

tbody {
  display: block;
  height: 400px;
  overflow-y: scroll;
}

tbody tr:nth-child(even) td:not(:first-child) {
  background: yellow;
}

tbody td:first-child {
  background: none;
  border: none;
  padding: 0;
}

th,
td {
  padding: 10px 5px;
}

th:nth-child(1),
td:nth-child(1) {
  background: none;
  border: none;
  width: 20px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 90px;
}

th:nth-child(3),
td:nth-child(3) {
  width: 200px;
}

th:nth-child(4),
td:nth-child(4) {
  width: 90px;
}

th:nth-child(5),
td:nth-child(5) {
  width: 90px;
}

th:nth-child(6),
td:nth-child(6) {
  width: 90px;
}

th:nth-child(7),
td:nth-child(7) {
  width: 90px;
}

th:nth-child(8),
td:nth-child(8) {
  width: 90px;
}

th:nth-child(9),
td:nth-child(9) {
  width: 100px;
}

th:nth-child(10),
td:nth-child(10) {
  width: 100px;
}
＆＃13; 
<div class="page">
  <div class="table-con" id="table">
    <!--     <div class="white-block"></div>
    <div class="white-block white-block-1"></div> -->
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
          <th>Header 5</th>
          <th>Header 6</th>
          <th>Header 7</th>
          <th>Header 8</th>
          <th>Header 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td></td>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题