如何删除html< table>专栏只使用CSS？ [英] How to remove an html <table> column using only CSS?

问题描述

我有一个HTML < table> ，其中包含许多列，所以当我的网页显示在移动浏览器上时，它太小了。因此，我正在创建一个媒体查询，我想删除一些列（这并不重要）。

I have an HTML <table> with many columns, so when my web page is displayed on a mobile browser, it's too small. So I'm creating a media query and I want to remove some columns (That are not important).

那么，如何仅使用CSS删除html列？

So how to remove an html column using only css ?

例如，如何在下一个示例中删除表格中间的 B列：

For example, how to remove the column "B" in the middle of the table on the next example :

table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

<table>
<th>A</th>
<th>B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

推荐答案

<style>
        table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

  @media (max-width: 768px){

    tr th:nth-child(2),tr td:nth-child(2){

      display:none;
    }

  }
    </style>

这篇关于如何删除html< table>专栏只使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！