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;`使表格横向滚动。注意，表头需要额外设置高度，以避免文字重叠。