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

Продолжим изучение темы CSS - таблицы. Если пропустили прошлые статьи, то вот ссылки на них:

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

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;}, то ячейка не будет скрыта. Наследуется.

empty-cells

Значения:

show - Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide - Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

HTML

<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  </tr>
<tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td></td>
</tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
</tr>
</table>

CSS

table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {border: 2px solid #69c;}

📷 РИС. 4. ПРИМЕР СКРЫТИЯ ПУСТОЙ ЯЧЕЙКИ ТАБЛИЦЫ

Продолжение в следующей статье!