响应表隐藏没有值的列

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

您的问题与您所描述的不完全一样。在“非工作示例”小提琴中查看您的表格时，结果不会显示一系列空表格单元格 - 它显示 no 表格单元格。

相反，您正在输出：

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

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

您的 CSS 基于使用选择器 :nth-of-type(N) 在 <td> 前面添加一些内容。您的网格中有 9 列：Company、Cust.No、Contact、Address、Phone 、电子邮件、文件、创建日期和备注。

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

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

此块将包含表格列标题的 <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%; 
}

正如评论所说，这些块禁用了表格的默认display: table CSS 渲染，而是开始强制其中包含的所有元素都显示block - 这意味着每个新元素都将从新行开始默认。这就是导致您的单元格在一行中彼此重叠出现的原因。

<td> 标签上的padding-left: 50% 强制您的数据从表格的中心开始显示。

现在是魔术：

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

这行说...“对于任何<td> 标记，如果它是其父元素中的第(1) 个<td>，则将文本'MFG P/N' 注入其:before 伪元素。”

:before 伪元素是一个 CSS 构造，它出现在 DOM 之外（您无法在标记中或通过检查页面元素看到它） - 但仍呈现在屏幕。它在 inside 呈现它应用到的元素（<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>父元素中，将:before伪元素6px从上边缘定位，将6px从左边缘定位，使其45%与<td>等

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

现在解决问题：

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

请注意，您的<tbody> 中只有一个<td>。这就是为什么您没有显示带有多个前置标题的多行的原因 - 您的 CSS 仅作用于一个 <td> 单元格。

如果您希望显示一系列带有必要标题值的空框，则需要将 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) 到 :nth-of-type(9) 的 CSS 规则正确呈现必要的标题， （不间断空格）强制表格在所有浏览器中显示 <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"; }

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

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