在我的一个页面上，我有一个响应表，当浏览器变小时会改变布局。当我的表中的列具有值时，一切都正常，如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"; }
}
答案 0 :(得分：0)
你的问题并不完全是你所描述的。在“非工作示例”小提琴中查看表格时，结果不显示一系列空表格单元格 - 它显示 no 表格单元格。
相反，您正在输出：
<td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>
你正在使用一个相当聪明的CSS技巧在每个单元格之前显示列文本 - 我赞赏你 - 但我的印象是你并不真正理解CSS技巧是如何工作的，这就是为什么你有错误。让我为你分解，这是有道理的。
您的CSS基于使用选择器:nth-of-type(N)在<td>前面添加一些内容。您的网格中有9列：公司， Cust.No ，联系人，地址，电话，电子邮件，文件，创建日期和备注。
当您的网页低于某个宽度时，根据您的媒体查询，会发生以下情况：
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
此块将包含表格列标题的<thead>标记移出屏幕的可见空间（可见区域上方和上方10,000px）。
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 - 这意味着每个新元素都将启动默认情况下在新行上。这就是导致您的单元格在一行中出现在彼此之上的原因。
padding-left: 50%代码上的<td>会强制您的数据从表格中心开始显示。
现在为魔术：
td:nth-of-type(1):before { content: "MFG P/N"; }
这一行说明......“对于任何<td>标记，如果它是其父元素中的第（1）个<td>，则将文本'MFG P / N'注入其:before 1}}伪元素。“
:before伪元素是一个CSS构造，它出现在之外的（你无法在标记中看到它或通过检查页面的元素） - 但仍然在屏幕上呈现。它在里面呈现它应用的元素（<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>
请注意，<td> 中只有一个{em} <tbody>。这就是为什么你没有显示多个带有多个前置标题的行 - 你的CSS只有一个<td>单元格。
如果您希望显示一系列带有必需标头值的空框，则需要将HTML输出更改为以下内容：
<table>
<thead><!-- still omitted, because it still doesn't matter --></thead>
<tbody>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><!-- 9 columns, to match your 9 headers -->
</tbody>
</table>
这将允许:nth-of-type(1)到:nth-of-type(9)的CSS规则正确呈现必需的标头， （不间断空格）强制表显示{{通过提供“隐形”内容，在所有浏览器中添加1 +}个标签。
我希望这会有所帮助。
附加说明：
您当前的CSS包含一堆您不需要的垃圾。具体做法是：
<td> 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条。这些将永远不会应用于您当前的HTML布局 - 因为您的表中只有9列。
此外 - 您有3个单独的规则定位:nth-of-type ...这意味着即使您 有第10列，也只有最后这些规则（:nth-of-type(10)）将被应用，因为它将覆盖前两个规则。