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

以下是一个例子，可以实现表格竖着排列、表头竖向固定、横向滚动：

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

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    position: sticky;
    top: 0;
    background-color: #f2f2f2;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    white-space: nowrap;
}
</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>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
                <td>Row 1, Column 4</td>
                <td>Row 1, Column 5</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
                <td>Row 2, Column 4</td>
                <td>Row 2, Column 5</td>
            </tr>
            <tr>
                <td>Row 3, Column 1</td>
                <td>Row 3, Column 2</td>
                <td>Row 3, Column 3</td>
                <td>Row 3, Column 4</td>
                <td>Row 3, Column 5</td>
            </tr>
        </tbody>
    </table>
</div>

解释一下样式部分：

- `border-collapse: collapse;` 让表格边框合并，看起来更整洁。
- `position: sticky; top: 0;` 让表头固定在顶部，不会随着滚动而消失。
- `background-color: #f2f2f2;` 设置表头的背景色。
- `writing-mode: vertical-lr; transform: rotate(180deg);` 让表头文字竖向排列，同时旋转180度，使其正面显示。
- `white-space: nowrap;` 防止表头文字换行。