html - 响应表隐藏没有值的列

Question

在我的一个页面上，我有一个响应式表格，当浏览器变小时，它会改变布局。当我的表中的列有值时，一切正常，如图in this fiddle .

但是，当列没有值时，其中一些不会显示在表格布局的小版本中，如图所示 in this fiddle .

我错过了什么？

我还从下面的非工作版本中复制了必要的代码:

@media only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    /* Label the data */
    td:nth-of-type(1):before { content: "MFG P/N"; }
    td:nth-of-type(2):before { content: "MFG Name"; }
    td:nth-of-type(3):before { content: "Part ID"; }
    td:nth-of-type(4):before { content: "Description"; }
    td:nth-of-type(5):before { content: "Cost"; }
    td:nth-of-type(6):before { content: "Price"; }
    td:nth-of-type(7):before { content: "On Hand"; }
    td:nth-of-type(8):before { content: "On Order"; }
    td:nth-of-type(9):before { content: "Allocated"; }
    td:nth-of-type(10):before { content: "Shipped"; }
    td:nth-of-type(11):before { content: "Report"; }
    td:nth-of-type(12):before { content: "RMA"; }
    td:nth-of-type(10):before { content: "File"; }
    td:nth-of-type(10):before { content: "Add Part"; }
}

Answer 1

你的问题和你描述的不完全一样。在“非工作示例” fiddle 中查看您的表格时，结果不显示一系列空表格单元格 - 它不显示表格单元格。

相反，您正在输出:

<td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>

你正在使用一个相当聪明的 CSS 技巧在每个单元格之前显示列文本 - 我为你鼓掌 - 但我的印象是你并不真正了解 CSS 技巧是如何工作的，这就是为什么你有错误。让我为你分解它，所以它是有道理的。

您的 CSS 基于使用选择器 :nth-of-type(N)在 <td> 前面添加一些内容.您的网格中有 9 列:公司、客户编号、联系人、地址、电话、电子邮件、文件、创建日期和备注。

当您的页面低于某个宽度时，根据您的媒体查询，会发生以下情况:

thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

此 block 移动 <thead>包含表格列标题的标签，位于屏幕可见空间之外(可视区域上方和左侧 10,000 像素)。

table, thead, tbody, th, td, tr { 
    display: block; 
}
td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

正如评论所说，这些 block 禁用默认 display: table表格的 CSS 渲染，而是开始强制其中包含的所有元素具有 block display - 意味着默认情况下每个新元素都将在新行开始。这就是导致您的单元格在一行中彼此重叠出现的原因。
padding-left: 50%在 <td>标签是强制您的数据从表格中心开始显示的原因。

现在魔术:

td:nth-of-type(1):before { content: "MFG P/N"; }

这一行说...“对于任何 <td> 标签，如果它是其父元素中的第 (1) 个 <td>，则将文本 'MFG P/N' 注入(inject)其 :before 伪元素。”
:before伪元素是一种 CSS 结构，它出现在 DOM 之外(您无法在标记中或通过检查页面元素看到它) - 但仍会在屏幕上呈现。它呈现在它适用的元素内( <td>)。下面的 CSS 告诉它如何显示:

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

换句话说，在 position: relative 内 <td> parent ，定位 :before伪元素 6px从顶部边缘和 6px从左边开始，使它成为 45%与 <td> 一样宽， 等等。

这就是在行前注入(inject)“标题”的原因。

现在解决问题 :

您的 HTML/JS 当前在您的非工作示例中呈现以下 HTML(简化以显示重要部分):

<table>
  <thead><!-- omitted because it is off-screen --></thead>
  <tbody>
    <tr class="odd">
      <td valign="top" colspan="10" class="dataTables_empty">
        No data available in table
      </td>
    </tr>
  </tbody>
</table>

注意只有一个 <td>在您的 <tbody> 内.这就是为什么您没有显示带有多个前置标题的多行 - 只有一个 <td>您的 CSS 正在作用的单元格。

相反，如果您想显示一系列带有必要标题值的空框，则需要将 HTML 输出更改为以下内容:

<table>
  <thead><!-- still omitted, because it still doesn't matter --></thead>
  <tbody>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td><!-- 9 columns, to match your 9 headers -->
  </tbody>
</table>

这将允许 :nth-of-type(1) 的 CSS 规则通过 :nth-of-type(9)使用   正确呈现必要的标题(不间断空格)强制表格显示 <td>通过提供“不可见”的内容，在所有浏览器中添加标签。

我希望这有帮助。

附加说明:

您当前的 CSS 包含一堆您不需要的垃圾。具体来说:

td:nth-of-type(10):before { content: "Shipped"; }
td:nth-of-type(11):before { content: "Report"; }
td:nth-of-type(12):before { content: "RMA"; }
td:nth-of-type(10):before { content: "File"; }
td:nth-of-type(10):before { content: "Add Part"; }

您的最后 5 个 :nth-of-type规则。这些将永远不会应用，使用您当前的 HTML 布局 - 因为您的表格中只有 9 列。

此外 - 您有 3 个针对 :nth-of-type(10) 的单独规则...这意味着即使您确实有第 10 列，也只会应用这些规则中的最后一个( "Add Part" )，因为它将覆盖前两个规则。