HTML表隐藏单元格

Question

我知道每个人都会告诉我不要使用表，但是我明白了，但是它在这个简单的应用程序中有效，只是我试图隐藏一些单元格。似乎无法弄清楚如何阻止它们显示。任何帮助将不胜感激！

repositoryPath

Answer 1

表应在某些情况下（例如，当您要显示表格数据时）应使用它们，但它们经常被误用于页面布局。

您可以使用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>

Answer 2

将visibility: hidden;用于您的<td>风格

我们为什么不使用colspan来使我们的单元格更易于配置，而不是只在一个单元格中制作3种或更多样式？

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