我正在使用CSS技巧响应表（https://css-tricks.com/sensitive-data-tables/），但想知道如何摆脱移动视图的最后td“之前”内容。
基本上是针对此代码的，它在响应视图的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"; }
对于第一行（在单元格中写有“费用”），除了LAST单元格之外，其他所有代码行如何发生？发生的是我的最后一个是该表的“总计”行，因此，我不需要将“之前的td内容”写入最后一个td（如果这样的话……我也想知道我的表格式是否需要调整，否则我只需要对“总计”行和这些响应表进行不同的处理-CSS技巧上没有明确的示例，其中包含“总计”行的响应表）。
我一直在尝试最后一个孩子，nth-last-of-type等，但是没有运气。这是我尝试过的示例：
table td:nth-last-of-type(1)::before { content: " "; }
但是，它不起作用。我读过您可以将伪元素和psuedo类组合在一起...我尝试过与：not还和display：none组合，并尝试更改HTML，但是没有运气。甚至在最后一个td上用jQuery不显示任何内容，并添加一个类，然后不显示任何内容？我正在与此圈子。
谁能帮我？
谢谢！
更新：这是一个显示此内容的JSFiddle：https ://jsfiddle.net/gamehendgeVA/vh7bjscy/
如果我正确理解了您的问题，您只想删除“总支出”行的最后一个描述符“支出”？为此，您必须首先专门针对最后一行，然后再针对其第一个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>正如评论中所讨论的那样，我个人更喜欢使用不同的标签，因为表打破了通常的ltr-reading范式，但这当然取决于您的喜好。
您的表格的最佳/正确格式如下（以我的拙见）：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句