响应CSS按<thead>堆栈表

我希望能够显示下表,以便它按移动设备上的标题堆叠

<table>
<thead>
    <tr>
        <th>Within the UK</th>
        <th>Outside the UK</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Within 1</td>
        <td>Outside 1</td>
    </tr>
    <tr>
        <td>Within 2</td>
        <td>Outside 2</td>
    </tr>
    <tr>
        <td>Within 3</td>
        <td>Outside 3</td>
    </tr>
    <tr>
        <td>Within 4</td>
        <td>Outside 4</td>
    </tr>
</tbody>

我希望数据在移动设备上显示如下:

Desired layout

评论
  • 海绵宝宝
    海绵宝宝 回复

    TR是表行。正确的代码是

    <table>
    <thead>
        <tr>
            <th>Within the UK</th>
            <td>Within 1</td>
            <td>Within 2</td>
            <td>Within 3</td>
            <td>Within 4</td>        
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Outside the UK</th>
            <td>Outside 1</td>
            <td>Outside 2</td>
            <td>Outside 3</td>
            <td>Outside 4</td>
        </tr>
    </tbody>
    </table>
    

    更新

    添加CSS

    @media (max-width: 767.98px) {
    tr, td {display: block;}
    }