html - 标题在左侧(垂直)的响应式表格

Question

我正在尝试构建一个响应式表格。到目前为止很容易。因此我使用了以下 CodePen by Dudley Sturey :

*CSS (Pen rewritten for SAAS)*
table.responsive-table {
    margin: 0;
    border-collapse: collapse;
    font-weight: 100; 
    background: #333; color: #fff;
    text-rendering: optimizeLegibility;
    border-radius: 5px; 

    caption { 
        font-size: 2rem; color: #fff;;
        margin: 1rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left, center right; 
    }

    thead th { font-weight: 600; }
    thead th, tbody td { padding: .8rem; font-size: 1.4rem; }
    tbody td { padding: .8rem; font-size: 1.4rem; color: #444; background: #eee; }
    tbody tr:not(:last-child) { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }

    @media screen and (max-width: 639px) {

        caption { background-image: none; }
        thead { display: none; }
        tbody td { display: block; padding: .6rem; }
        tbody tr td:first-child { background: #666; color: #fff; }
        tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 6rem; }

    }
}

*HTML*
    <table class="responsive-table">
        <caption>The Films of Hayao Miyazaki</caption>
        <thead align="left">
            <tr><th>Film</th><th>Year</th><th>Honor</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>My Neighbor Totoro</td>
                <td>1988</td>
                <td>Blue Ribbon Award (Special)</td>
            </tr>    
            <tr>
                <td>Princess Mononoke</td>
                <td>1997</td>
                <td>Nebula Award (Best Script)</td>
            </tr>
            <tr>
                <td>Spirited Away</td>
                <td>2001</td>
                <td>Academy Award (Best Animated Feature)</td>
            </tr>
            <tr>
                <td>Howl’s Moving Castle</td>
                <td>2004</td>
                <td>Hollywood Film Festival (Animation OTY)</td>
            </tr>
        </tbody>
    </table>

这确实是一段很棒的代码。我现在的问题是，我想在表格的左侧放置表格标题。我用谷歌搜索了一下，发现……好吧，几乎什么都没有。规定的唯一方法是不使用和标签，但这些对于使用 Dudley 制造的钢笔是强制性的。

有没有人知道如何使用 thead 任何 tbody 标签实现左侧标题？

非常感谢您在这件事上的时间和帮助。

Answer 1

只需让表格标题左对齐:

 thead{
    text-align:left;
}