当存在多个单元格时，如何隐藏或删除空单元格？

Question

正如你在下面看到的，我在同一个thead中有第7个标签和3个td标签。这显示为following image。我想删除或隐藏空单元格而不隐藏整行。 有什么想法吗？

<thead>
<tr>
    <th class="af1067-col header"></th>
    <th class="priority-col header"></th>
    <th class="project-id-col header"></th>
    <th class="budget-color-3400 header">Q1</th>
    <th class="budget-color-3400 header">Q2</th>
    <th class="budget-color-3400 header">Q3</th>
    <th class="budget-color-3400 header">Q4</th>
</tr>
<tr>
    <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="af1067-col" type="text">
    </td>
    <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="priority-col" type="text">
    </td>
    <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="project-id-col" type="text">
    </td>
</tr>

Answer 1

如果您想隐藏td中的空单元格thead，只需将display:none设置为budget-color-3400，或者您可以使用类选择器（如果您的类具有不同的值） ）：

＆＃13;

＆＃13;

.header {
  background: red;
  min-width: 10px;
  min-height: 10px;
}
#selector [class*="-color"] {
  display: none
}
#class .budget-color-3400 {
  display: none
}

＆＃13;

<table id="selector">
  <thead>
    <tr>
      <th class="af1067-col header">Tracking ID
      </th>
      <th class="priority-col header">Priority
      </th>
      <th class="project-id-col header">Project ID
      </th>
      <th class="budget-color-3400 header">Q1</th>

      <th class="budget-color-3400 header">Q2</th>

      <th class="budget-color-3400 header">Q3</th>

      <th class="budget-color-3400 header">Q4</th>
    </tr>
    <tr>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="af1067-col" type="text">
      </td>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="priority-col" type="text">
      </td>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="project-id-col" type="text">
      </td>
    </tr>
  </thead>
</table>
<hr />
<table id="class">
  <thead>
    <tr>
      <th class="af1067-col header">Tracking ID
      </th>
      <th class="priority-col header">Priority
      </th>
      <th class="project-id-col header">Project ID
      </th>
      <th class="budget-color-3400 header">Q1</th>

      <th class="budget-color-3400 header">Q2</th>

      <th class="budget-color-3400 header">Q3</th>

      <th class="budget-color-3400 header">Q4</th>
    </tr>
    <tr>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="af1067-col" type="text">
      </td>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="priority-col" type="text">
      </td>
      <td class="input-filter-td">
        <input class="column-filter cell-content" data-target="project-id-col" type="text">
      </td>
    </tr>
  </thead>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你想要这样的东西：

[class*="-col"]:empty {
  display: none;
}

诀窍是确保容器中没有空格，因此使其适合:empty伪选择器。