Question

我正在尝试使表格显示得更灵敏。我已经尝试过对两列布局采用CSS-tricks（https://css-tricks.com/responsive-data-tables/）方法，并且大部分情况下都可以使用，但是我的问题在于跨多行的列无法在移动视图中重复并导致伪标头的对齐混乱。

这是我使用的HTML的副本：

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

和CSS：

<style>

@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {

    table, thead, tbody, th, td, tr { 
    display: block; 
    }

    th {
    color: #ffffff;
    font-weight: bold;
    }

    thead tr{
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        border: none;
        border-bottom: 1px solid rgb(221, 221, 221);
        position: relative;
        padding-left: 30%;
        text-align: left;
        white-space: normal;
    }       

    td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: normal;
    }

    td:nth-of-type(1):before { content: "A"; }
    td:nth-of-type(2):before { content: "B"; }
    td:nth-of-type(3):before { content: "C"; }
    td:nth-of-type(4):before { content: "D"; }
    td:nth-of-type(5):before { content: "E"; }
    }
}

在移动设备视图中，创建的“标题”与数据的内容不一致，即列“ A”的数据应为“ 1”

Answer 1

我认为[rowspan =“ 2”]属性可能会给您带来麻烦。

“ tbody”标签的第三个“ tr”标签缺少一列。

对不起，我的英语不好。

Answer 2

.dn {
  display: none;
}


@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {

    table, thead, tbody, th, td, tr { 
    display: block; 
    }

    th {
    color: #ffffff;
    font-weight: bold;
    }

    thead tr{
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        border: none;
        border-bottom: 1px solid rgb(221, 221, 221);
        position: relative;
        padding-left: 30%;
        text-align: left;
        white-space: normal;
    }       

    td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: normal;
    }

    td:nth-of-type(1):before { content: "A"; }
    td:nth-of-type(2):before { content: "B"; }
    td:nth-of-type(3):before { content: "C"; }
    td:nth-of-type(4):before { content: "D"; }
    td:nth-of-type(5):before { content: "E"; }
    }
}

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class='dn'>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

响应表显示

2 个答案: