html让表格竖着排列,html表格，表头竖向固定，横向滚动的例子

以下是一个 HTML 表格，可以实现表头竖向固定，横向滚动的效果：

<style>
  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  th {
    background-color: #f2f2f2;
    white-space: nowrap;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    height: 100px;
    width: 50px;
  }

  tbody {
    display: block;
    height: 300px;
    overflow-y: auto;
  }

  tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
</style>

<table>
  <thead>
    <tr>
      <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>
      <th>Header 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
      <td>Row 1, Cell 4</td>
      <td>Row 1, Cell 5</td>
      <td>Row 1, Cell 6</td>
      <td>Row 1, Cell 7</td>
      <td>Row 1, Cell 8</td>
      <td>Row 1, Cell 9</td>
      <td>Row 1, Cell 10</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
      <td>Row 2, Cell 4</td>
      <td>Row 2, Cell 5</td>
      <td>Row 2, Cell 6</td>
      <td>Row 2, Cell 7</td>
      <td>Row 2, Cell 8</td>
      <td>Row 2, Cell 9</td>
      <td>Row 2, Cell 10</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
      <td>Row 3, Cell 4</td>
      <td>Row 3, Cell 5</td>
      <td>Row 3, Cell 6</td>
      <td>Row 3, Cell 7</td>
      <td>Row 3, Cell 8</td>
      <td>Row 3, Cell 9</td>
      <td>Row 3, Cell 10</td>
    </tr>
    <tr>
      <td>Row 4, Cell 1</td>
      <td>Row 4, Cell 2</td>
      <td>Row 4, Cell 3</td>
      <td>Row 4, Cell 4</td>
      <td>Row 4, Cell 5</td>
      <td>Row 4, Cell 6</td>
      <td>Row 4, Cell 7</td>
      <td>Row 4, Cell 8</td>
      <td>Row 4, Cell 9</td>
      <td>Row 4, Cell 10</td>
    </tr>
    <tr>
      <td>Row 5, Cell 1</td>
      <td>Row 5, Cell 2</td>
      <td>Row 5, Cell 3</td>
      <td>Row 5, Cell 4</td>
      <td>Row 5, Cell 5</td>
      <td>Row 5, Cell 6</td>
      <td>Row 5, Cell 7</td>
      <td>Row 5, Cell 8</td>
      <td>Row 5, Cell 9</td>
      <td>Row 5, Cell 10</td>
    </tr>
  </tbody>
</table>

这个表格中，表头使用了 CSS 的 `writing-mode` 属性，将文字竖向排列，并使用 `transform` 属性将文字翻转180度，使其正常显示。同时，表头的高度设置为100px，保证表头与表格内容有一定的距离。

表格内容使用了 `display: block;` 和 `height: 300px;` 属性，将其设置为块级元素，并且设置了固定的高度，以便实现垂直滚动条。

最后，使用了 `table-layout: fixed;` 属性，使表格布局固定，以便实现横向滚动条。