html表格文字竖直排列

要在 HTML 表格中实现文字竖直排列，可以使用 CSS 中的 transform 属性，将表格单元格中的文字旋转90度。以下是一个示例：

<table>
  <tr>
    <td>
      <div class="vertical-text">文字竖直排列</div>
    </td>
  </tr>
</table>

<style>
  .vertical-text {
    writing-mode: vertical-rl; /* 竖直排列 */
    transform: rotate(180deg); /* 翻转文字，使其从底部向上显示 */
  }
</style>

这将在表格单元格中创建一个包含竖直文本的 `<div>` 元素，并使用 CSS 将其旋转90度，并翻转以使其从底部向上显示。根据需要，你可以根据实际情况更改样式。

相关问题

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

以下是一个实现表头竖向固定、横向滚动的例子：

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        overflow-x: auto;
    }
    th {
        position: sticky;
        top: 0;
        background-color: white;
        writing-mode: vertical-lr;
        text-orientation: mixed;
        height: 100px;
        font-size: 20px;
        border: 1px solid black;
    }
    td, th {
        padding: 10px;
        text-align: center;
        border: 1px solid black;
    }
</style>

<div style="overflow-x: auto;">
    <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>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
            </tr>
            <!-- 其他行 -->
        </tbody>
    </table>
</div>

其中，`position: sticky;`使表头固定在顶部，`writing-mode: vertical-lr;`和`text-orientation: mixed;`使表头文字竖直排列，`overflow-x: auto;`使表格横向滚动。注意，表头需要额外设置高度，以避免文字重叠。