在 HTML 中旋转表格

在 HTML 中，通常我们使用 <table> 元素来创建表格。但是当表格数据很宽时，如果不想水平滑动表格的情况下展示数据，我们可以使用将表格旋转来显示数据。下面我们来介绍在 HTML 中如何旋转表格。

方法一：使用 CSS

我们可以使用 CSS 的 transform 属性来旋转表格。具体步骤如下：

1. 首先将表格包装在一个容器元素内。
2. 给容器元素添加一个 transform:rotate(-90deg) 的样式，将表格旋转90度。
3. 旋转后表格的行列会颠倒，这时我们需要再用 CSS 的 nth-child 伪类来逆时针旋转每一个单元格。

下面是示例代码：

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小刚</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .table-wrapper {
    overflow: auto; /* 防止表格溢出 */
  }
  .table-wrapper table {
    border-collapse: collapse;
  }
  .table-wrapper th, .table-wrapper td {
    padding: 8px;
    border: 1px solid #ccc;
    transform-origin: center center;
    text-align: center;
  }
  .table-wrapper th {
    font-weight: bold;
  }
  .table-wrapper tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  .table-wrapper tr:nth-child(odd) {
    background-color: #fff;
  }
  .table-wrapper tr td:nth-child(1), .table-wrapper tr th:nth-child(1) {
    transform: rotate(-90deg);
  }
  .table-wrapper tr td:nth-child(2), .table-wrapper tr th:nth-child(2) {
    transform: rotate(-90deg);
  }
  .table-wrapper tr td:nth-child(3), .table-wrapper tr th:nth-child(3) {
    transform: rotate(-90deg);
  }
</style>

方法二：使用 JavaScript

我们可以使用 JavaScript 代码自动将表格旋转90度，并添加样式。具体步骤如下：

1. 遍历表格，将每一个单元格旋转90度。
2. 对表头进行特殊处理，因为表头通常需要加粗字体，并且只旋转第一行，其他行不需要旋转。
3. 设置容器元素的样式，使其可以正确显示表格。

下面是示例代码：

<div id="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小刚</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  #table-wrapper {
    width: 400px; /* 表格宽度 */
    height: 300px; /* 表格高度 */
    overflow: auto; /* 防止表格溢出 */
    position: relative;
  }
  #table-wrapper table {
    position: absolute;
    top: 0;
    left: 0;
    border-collapse: collapse;
  }
  #table-wrapper th, #table-wrapper td {
    padding: 8px;
    border: 1px solid #ccc;
    transform-origin: center center;
    text-align: center;
  }
  #table-wrapper th {
    font-weight: bold;
  }
  #table-wrapper tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  #table-wrapper tr:nth-child(odd) {
    background-color: #fff;
  }
</style>

<script>
  // 获取容器元素和表格
  var tableWrapper = document.getElementById('table-wrapper');
  var table = tableWrapper.getElementsByTagName('table')[0];

  // 旋转表格单元格
  for (var i = 0; i < table.rows.length; i++) {
    var row = table.rows[i];
    for (var j = 0; j < row.cells.length; j++) {
      var cell = row.cells[j];
      cell.style.transform = 'rotate(-90deg)';
      cell.style.transformOrigin = 'center center'
    }
  }

  // 表头加粗并旋转
  var thRow = table.rows[0];
  for (var k = 0; k < thRow.cells.length; k++) {
    thRow.cells[k].style.fontWeight = 'bold';
    thRow.cells[k].style.transform = 'rotate(-90deg)';
  }

  // 设置容器元素高度和宽度
  tableWrapper.style.height = table.offsetHeight + 'px';
  tableWrapper.style.width = table.offsetWidth + 'px';
</script>

以上两种方法都可以实现将表格旋转90度的效果，具体使用哪种方法可以根据实际情况来选择。