HTML-таблицы скрывают <td>ячеек

Question

Я знаю, что все скажут мне не использовать таблицы, и я их получу, но это работает в этом простом приложении, за исключением того, что я пытаюсь скрыть несколько ячеек.Не могу понять, как предотвратить их отображение.Любая помощь будет принята с благодарностью!

<div id="memtab">
    <table>
        <tr class="head">
            <td>Head 1</td>
            <td>Head 2</td>
            <td>Head 3</td>
            <td>Head 4</td>
            <td>Head 5</td>
        </tr>
        <tr>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
        </tr>
        <tr>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
        </tr>
        <tr>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
            <td>Display</td>
        </tr>
        <tr>
            <td>Hide</td>
            <td>Hide</td>
            <td>Hide</td>
            <td>Display</td>
            <td>Display</td>
        </tr>
    </table>
</div>

Answer 1

Используйте visibility: hidden; для вашего <td> стиля

Вместо простого создания 3 или более стилей в одной ячейке, почему бы нам использовать colspan, чтобы упростить настройку нашей ячейки?

<tr>
    <td colspan=2 style="visibility:collapse">Hide</td>
    <td>Display</td>
    <td>Display</td>
</tr>

Answer 2

Таблицы следует использовать в определенных сценариях - например, когда вы хотите отобразить табличные данные - но они часто неправильно используются для разметки страницы.

Вы можете скрыть ячейки, используя visibility: hidden.

Примечание: узнайте об элементах HTML-таблиц, таких как thead, tbody и th.Они помогут структурировать ваш стол с большим семантическим значением.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {
  border-collapse: collapse;
}

thead {
  background: yellow;
}

th,
td {
  border: 1px solid black;
}

.hide {
  visibility: hidden;
  border: none;
}

<div id="memtab">
    <table>
        <thead>
          <tr>
              <th>Head 1</th>
              <th>Head 2</th>
              <th>Head 3</th>
              <th>Head 4</th>
              <th>Head 5</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
            </tr>
            <tr>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
            </tr>
            <tr>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
                <td>Display</td>
            </tr>
            <tr>
                <td class="hide">Hide</td>
                <td class="hide">Hide</td>
                <td class="hide">Hide</td>
                <td>Display</td>
                <td>Display</td>
            </tr>
        </tbody>
    </table>
</div>