Question

我有一个表是由我正在使用的某些软件自动生成的，表是QOProducts，并且有以下四列：

<table id="QOProducts" border="1" style="visibility: visible; display: block;">
<tbody>
<tr>
<th>
<b>Thumbnail</b>
</th>
<th style="width:250px;">
<b>Product Name</b>
</th>
<th style="width:150px;">
<b>Description</b>
</th>
<th>
<b>Quantity</b>

我尝试过几种方法，但有人知道是否可以隐藏全局css文件中的第二列，因为我没有直接访问该页面。或者我需要使用jQuery吗？

任何想法都赞赏。

Answer 1

如果您想要一个不需要nth-child的解决方案（IE8等旧浏览器不支持），您可以使用这些旧浏览器支持first-child的事实。 / p>

#QOProducts th:first-child + th, #QOProducts td:first-child + td {
  display:none;
}

<table id="QOProducts" border="1" >
  <tbody>
    <tr>
      <th>
        <b>Thumbnail</b>
      </th>
      <th style="width:250px;">
        <b>Product Name</b>
      </th>
      <th style="width:150px;">
        <b>Description</b>
      </th>
      <th>
        <b>Quantity</b> 
    <tr><td>test<td>test<td>test<td>test</tr>
</table>

Answer 2

这应该有用

#QOProducts tr td:nth-child(2), #QOProducts tr th:nth-child(2) {
    display:none;
}

Answer 3

尝试在CSS

中添加此内容

tr > th:nth-of-type(2),
tr > td:nth-of-type(2) {
  display: none;
}

Answer 4

您正在寻找nth-child(n)选择器，在你的情况下，你想要隐藏第二个列，所以我假设你的意思是每个td的第二个 tr。

这将加起来

#QOProducts tr td:nth-child(2) {
    display: none;
}

即使只针对td中的tr - 如果您对结构不确定，也可以简化选择器并使其更加全局化。

#QOProducts > * > td:nth-child(2) {
    display: none;
}

这只会针对桌子直接孩子的直接td孩子（如果这对你有任何意义）

如果您还需要隐藏任何嵌套表格的第二个td等等，您可以随时执行此操作

#QOProducts td:nth-child(2) {
    display: none;
}

会为您隐藏所有第二个孩子 td。

在CSS中隐藏表列

4 个答案: