Question

我正在使用css技巧响应表（https://css-tricks.com/responsive-data-tables/），但想知道如何摆脱移动视图的最后一次＆＃34;之前＆＃34;内容。

这个代码基本上是为响应式视图写入td的文本：

table td:nth-of-type(1)::before { content: "Expenses"; }
table td:nth-of-type(2)::before { content: "2015"; }
table td:nth-of-type(3)::before { content: "2016"; }

对于第一行（写入＆＃34;费用＆＃34;在单元格中），除了最后一个单元格之外，我该怎么办呢？发生了什么是我的最后一次是＆＃34;总计＆＃34;这个表的行，所以我不需要＆＃34; td之前的内容＃34;写到最后一个td（如果有任何意义的话......我也想知道我的表格格式是否需要调整，或者我只需要处理＆＃34;总计和＃34;这些都与这些不同响应表 - 对于具有＆＃34;总计＆＃34;行的响应表，CSS技巧没有明确的示例。

我一直在尝试最后一个孩子，n-last-of-type等，但没有运气。这是我尝试过的一个例子：

 table td:nth-last-of-type(1)::before { content: " "; }

但是，它不起作用。我已经读过你可以将伪元素和psuedo类结合起来......我尝试过组合：还有，不显示：none，并试图改变HTML，但没有运气。也许甚至用jQuery写一个显示没有到最后一个td并添加一个类然后显示无？我用这个圈子跑了。

任何人都可以帮助我吗？

谢谢！

更新：这是一个JSFiddle，显示：https://jsfiddle.net/gamehendgeVA/vh7bjscy/

Answer 1

如果我正确理解了您的问题，您只想删除“总费用”行的最后一个描述符“费用”？为此，您必须首先专门定位最后一行，然后是第一行td：

table tr:last-of-type td:nth-of-type(1)::before{content: "";}

table {border-collapse: collapse;width: 100%;color: #444;}
tr:nth-of-type(2n+1) {background: #eee none repeat scroll 0 0;}
th {background: #696969 none repeat scroll 0 0;color: #fff;font-weight: bold;}
td, th {border: 1px solid #ccc;padding: 6px;text-align: left; vertical-align: middle;}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute; top: -9999px; left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td {
        /* Behave  like a "row" */
        border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;
    }
    /* Grants and Contracts table */
    table td:nth-of-type(1)::before { content: "Expense"; }
    table td:nth-of-type(2)::before { content: "2014"; }
    table td:nth-of-type(3)::before { content: "2015"; }
    table td:nth-of-type(4)::before { content: "2016"; }

    table tr:last-of-type td:nth-of-type(1)::before {content: "";}

<table id="expenses">
<thead>
<tr><th>Expense</th><th>2014</th><th>2015</th><th>2016</th></tr>
</thead>
<tbody>
<tr><td>Salaries</td><td>$85,256</td><td>$65,487</td><td>$94,626</td></tr>
<tr><td>Publication costs</td><td>22,698</td><td>69,548</td><td>66,555</td></tr>
<tr><td><strong>Total Expenses</strong></td><td><strong>$126,061</strong></td><td><strong>$169,013</strong></td><td><strong>$65,887</strong></td></tr>
</tbody>
</table>

正如评论中所讨论的，我个人更喜欢different labeling，因为表格与通常的阅读范式有关，但这当然符合您的喜好。

您桌子的最佳/正确格式（以我的拙见）如下：

table {
    border-collapse: collapse;
    width: 100%;
    color: #444;
}
tr:nth-of-type(2n+1) {
    background: #eee none repeat scroll 0 0;
}
th {
    background: #696969 none repeat scroll 0 0;
    color: #fff;
    font-weight: bold;
}
th span{float:right}
td, th {
    border: 1px solid #ccc;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /* Grants and Contracts table */
    table td:nth-of-type(1)::before { content: "2014"; }
    table td:nth-of-type(2)::before { content: "2015"; }
    table td:nth-of-type(3)::before { content: "2016"; }

<table id="expenses">
<thead>
<tr>
<th>Expense \ Year</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th>Salaries</th><td>$85,256</td><td>$65,487</td><td>$94,626</td>
</tr>
<tr>
<th>Publication costs</th><td>22,698</td><td>69,548</td><td>66,555</td>
</tr>
<tr>
<th><strong>Total Expenses</strong></th><td><strong>$126,061</strong></td><td><strong>$169,013</strong></td><td><strong>$65,887</strong></td>
</tr>
</tbody>
</table>

Answer 2

如您所料，您应该可以使用

td:nth-last-child(1)::before {
    content: "";
}

或者，更简洁，

td:last-child::before {
    content: "";
}

这适用于Chris Coyier的演示，该演示伴随着您链接的帖子https://css-tricks.com/examples/ResponsiveTables/responsive.php（我在浏览器检查器中添加了样式，并且他们工作了）。如果它不适合你，你必须引入一些额外的冲突风格。例如，在两个td表格中，table td:nth-child(2) {content: ...}会覆盖td:nth-child(last) {content: ...}

标记该行＆＃34;总计，＆＃34;只需更改您使用的内容：

...
content: "Total";
...

如何使用nth-of-type：before和target除最后一个元素之外的所有元素，或者以不同方式定位的最后一个元素

2 个答案: