1

如何使响应式表格在同一页面中具有不同表格标题的两个或多个表格上工作？在手机或平板电脑上查看时，表头从 CSS 中获取标签数据。那么如何修改 CSS 以包含表 2 n 的标签数据，依此类推。http://css-tricks.com/responsive-data-tables/

/*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Porn Name"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

表格1

<table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Porn Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr>
        </thead>

现在对于表 2，CSS 中的解决方案是什么？

<table>
        <thead>
        <tr>
            <th>Place</th>
            <th>Visit</th>
            <th>Game</th>

        </tr>
        </thead>
4

1 回答 1

4

您需要添加一些单独引用表格的方式 - 即：为每个表格提供唯一的 id 或 css 类，并更改您的 css 以使用匹配的选择器。

请参阅：MDN - 选择器

例如：

HTML

<table class="table1">
    …
</table>

<table class="table2">
    ….
</table>

CSS

.table1 td:nth-of-type(1):before { content: "First Name"; }
.table1 td:nth-of-type(2):before { content: "Last Name"; }
.table1 td:nth-of-type(3):before { content: "Job Title"; }
…

.table2 td:nth-of-type(1):before { content: "Place"; }
.table2 td:nth-of-type(2):before { content: "Visit"; }
.table2 td:nth-of-type(3):before { content: "Game"; }
于 2013-08-14T16:24:07.623 回答