Question

如何使响应表在具有不同表头的同一页面中的两个或多个表上工作？在移动设备或平板电脑上查看表头时，从CSS获取标签数据。那么如何修改CSS以包含表2的标签数据等等。 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>

Answer 1

你需要添加一些单独引用表的方法 - 例如：给每个表一个唯一的id或css类，并改变你的css以使用匹配的选择器。

请参阅：MDN - Selectors

例如：

<强> 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"; }

响应表在两个或更多表与不同的表头

1 个答案: