Question

我有一个包含许多行的表。每行都有标题广告表数据。当我隐藏一个表数据时，它删除了空间，但保留了行内的空间。任何解决方案将不胜感激。

到目前为止，我已经尝试使用CSS显示，但是没有成功。

<table>
  <tbody>
    <tr>
      <th>1</th>
      <td>2</td>
      <th>3</th>
      <td>4</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <!-- adding display none from jquery as table loads from server -->
      <th style="display:none">a</th>
      <td style="display:none">b</td>      
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

不显示任何内容将隐藏元素，但该行具有空白。有没有一种方法可以重新排列所有tds，以便在隐藏时不显示空格。

Answer 1

您可以使用visibility:hidden，因为即使元素被隐藏，它也可以保留元素的空间。

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

<table>
  <tbody>
    <tr>
      <th>1</th>
      <td>2</td>
      <th>3</th>
      <td>4</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <!-- adding display none from jquery as table loads from server -->
      <th style="visibility:hidden">a</th>
      <td style="visibility:hidden">b</td>      
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

Answer 2

<table>
  <tbody>
    <tr>
      <th>1</th>
      <td>2</td>
      <th>3</th>
      <td>4</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <!-- adding display none from jquery as table loads from server -->
      <th style="visibility:hidden">a</th>
      <td style="visibility:hidden">b</td>      
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

Answer 3

$(document).ready(
    function() {
      $('table tr:nth-child(2) th:nth-child(1)').hide();
      $('table tr:nth-child(2) td:nth-child(2)').hide();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>1</th>
      <td>2</td>
      <th>3</th>
      <td>4</td>
    </tr>
    <tr>
      <th>hide me</th>
      <td>hide me</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <!-- adding display none from jquery as table loads from server -->
      <th>a</th>
      <td>b</td>      
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

$(document).ready(
  function() {
    $('table tr:nth-child(2) th:nth-child(1)').hide();
    $('table tr:nth-child(2) td:nth-child(2)').hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>1</th>
      <td>2</td>
      <th>3</th>
      <td>4</td>
    </tr>
    <tr>
      <th>hide me</th>
      <td>hide me</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <!-- adding display none from jquery as table loads from server -->
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
    <tr>
      <th>a</th>
      <td>b</td>
      <th>c</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

表中td的对齐方式

3 个答案: