HTML表格使用媒体查询显示最后一列

Question

有没有办法只使用CSS媒体查询显示第一个和最后一个表列（最后一个是最右边的列）？

<table>
<tr>
    <td>Service</td>
    <td class="big">one</td>
    <td class="big">two</td>
    <td class="big">three</td>
    <td class="big">four</td>
    <td class="big">five</td>
    <td class="big">six</td>
    <td class="big">seven</td>
</tr>
</table>

所以在上面，我怎样才能显示第一列和最后一列（服务和七个）

我尝试使用媒体查询来隐藏td类big，但我需要一种方法来保留最后一个（我不能删除该类，因为它以编程方式生成）

Answer 1

默认隐藏所有td元素，然后在媒体查询中显示您想要的

例如

<style>
td.big {
  display: none;
}
@media (max-width: 600px) {
  td.big:first-child, td.big:last-child {
    display: table-cell;
  }
}
</style>

Answer 2

您可以使用nth-child选择器属性隐藏您不需要的所有列。