时间戳

首页 > 解决方案 > HTML表格隐藏单元格

html - HTML表格隐藏单元格

问题描述

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

在此处输入图像描述

在此处输入图像描述

<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>

标签： htmlcsshtml-table

解决方案

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

您可以使用隐藏单元格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>

推荐阅读