Вопросы Теги

Скрыть пустые ячейки в таблице

Я хочу скрыть пустые ячейки в таблице. Вот мой код:

$(function() {
  $(".empty").each(hideCellIfEmpty);
});

function hideCellIfEmpty() {
  var theCell = $(this);
  if (theCell.html().length == 0) {
    hideSoft(theCell);
  }
}

function hideSoft(jQElement) {
  jqElement.css('visibility', 'hidden');
}
table.empty {
  width: 350px;
  border-collapse: collapse;
  empty-cells: hide;
}
td.empty {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
  </tr>
</table>

Вы можете видеть, пустая ячейка показана во 2-й строке. Но я хочу это скрыть. Более того, я не хочу использовать border-collapse:separate. Можно ли скрыть пустую ячейку с помощью border-collapse:collapse? Я также хочу знать, почему это показывает пустые ячейки.

P.S. Использование border-collapse: separateработает и не показывает пустые ячейки.

$(function() {
  $(".empty").each(hideCellIfEmpty);
});

function hideCellIfEmpty() {
  var theCell = $(this);
  if (theCell.html().length == 0) {
    hideSoft(theCell);
  }
}

function hideSoft(jQElement) {
  jqElement.css('visibility', 'hidden');
}
table.empty {
  width: 350px;
  border-collapse: separate;
  empty-cells: hide;
}
td.empty {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
    <th>Title three</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
    <td class="empty">value</td>
  </tr>
</table>

Но это не отвечает на эти вопросы:

  1. Почему при использовании border-collapse: collapseотображаются пустые ячейки -?

  2. Почему пустая ячейка не отображается при использовании border-collapse: separate?

10
задан Brian Tompsett - 汤莱恩 27 July 2017 в 11:28
поделиться