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

以下是一个 HTML 表格，表头竖向固定，横向滚动的例子：

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    th {
        position: sticky;
        left: 0;
        background-color: #f2f2f2;
        writing-mode: vertical-lr;
        text-orientation: upright;
    }
    td:first-child {
        position: sticky;
        left: 0;
        background-color: #f2f2f2;
    }
    .wrapper {
        overflow-x: auto;
    }
</style>

<div class="wrapper">
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <td>Header 2</td>
                <td>Header 3</td>
                <td>Header 4</td>
                <td>Header 5</td>
                <td>Header 6</td>
                <td>Header 7</td>
                <td>Header 8</td>
                <td>Header 9</td>
                <td>Header 10</td>
                <td>Header 11</td>
                <td>Header 12</td>
                <td>Header 13</td>
                <td>Header 14</td>
                <td>Header 15</td>
            </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>
                <td>Row 1, Cell 11</td>
                <td>Row 1, Cell 12</td>
                <td>Row 1, Cell 13</td>
                <td>Row 1, Cell 14</td>
                <td>Row 1, Cell 15</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>
                <td>Row 2, Cell 11</td>
                <td>Row 2, Cell 12</td>
                <td>Row 2, Cell 13</td>
                <td>Row 2, Cell 14</td>
                <td>Row 2, Cell 15</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>
                <td>Row 3, Cell 11</td>
                <td>Row 3, Cell 12</td>
                <td>Row 3, Cell 13</td>
                <td>Row 3, Cell 14</td>
                <td>Row 3, Cell 15</td>
            </tr>
        </tbody>
    </table>
</div>

在这个例子中，我们使用了 `position: sticky` 属性让表头和第一列固定在页面的左侧和顶部。然后，我们使用了 `writing-mode: vertical-lr` 和 `text-orientation: upright` 属性让表头文字竖向显示。最后，我们使用了一个包含 `overflow-x: auto` 属性的容器来实现横向滚动。