Question

我已经有一个HTML表格，可以在下面看到：

<table border ="1">
        <tr>
            <td>Festival Name:</td>
            <td>Start Date:</td>
            <td>End Date:</td>
            <td>List of Trips to </td>
        </tr>

        <tr>      
            <td>Reading</td>
            <td>2013-04-03</td>
            <td>2013-04-07</td>
            <td>
                <a href="ControllerServlet?festivalProfileLink=2">View Profile and trips</a>
            </td>
        </tr>
</table>

然而问题是，由于我在左侧和右侧放置了横幅，因此它无法正确放入我的HTML网站。有没有办法能够自动垂直旋转表格，以便所有数据都适合页面？

Answer 1

我在这个jsFiddle

中放了两个选项

选项1

<table border="1">
    <tbody>
        <tr>
            <td>Festival Name:</td>
            <td>Reading</td>
        </tr>
        <tr>
            <td>Start Date:</td>
            <td>2013-04-03</td>
        </tr>
        <tr>
            <td>End Date:</td>
            <td>2013-04-07</td>
        </tr>
        <tr>
            <td>List of Trips to</td>
            <td><a href="http://fiddle.jshell.net/_display/ControllerServlet?festivalProfileLink=2">View Profile and trips</a>
            </td>
        </tr>
    </tbody>
</table>

选项2

的CSS：

   .box {
    position:absolute;
    left:30px;
    top:250px;
    transform-origin:left;
    transform:rotate(90deg); /* -webkit-, -moz-, etc. omitted for brevity */
}

HTML：

<div class="box">
    <table border="1">
        <tr>
            <td>Festival Name:</td>
            <td>Start Date:</td>
            <td>End Date:</td>
            <td>List of Trips to</td>
        </tr>
        <tr>
            <td>Reading</td>
            <td>2013-04-03</td>
            <td>2013-04-07</td>
            <td> <a href="ControllerServlet?festivalProfileLink=2">View Profile and trips</a>

            </td>
        </tr>
    </table>
</div>

我不确定你是否真的想要旋转它。

自动方式将HTML表及其列从水平旋转到垂直

1 个答案: