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

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>

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