4

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

但是，当列没有值时，其中一些不会显示在表格布局的小版本中，如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"; }
}
4

1 回答 1

0

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

相反，您正在输出：

<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、Email、File、Created Date和Notes。

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

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显示 - 这意味着每个新元素默认情况下将在新行上开始。这就是导致您的单元格在一行中彼此重叠出现的原因。

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

现在魔术：

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

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

:before伪元素是一种 CSS 结构，它出现在DOM 之外（您无法在标记中或通过检查页面元素看到它） - 但仍会呈现在屏幕上。它呈现在它应用到的元素内 (the <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伪元素，从左边缘开始，使其与等宽。6px6px45%<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><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>

这将允许您的 CSS 规则:nth-of-type(1)通过:nth-of-type(9)正确呈现必要的标题，通过提供“不可见”内容， &nbsp;（不间断空格）强制表格<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"( )，因为它将覆盖前两条。

于 2013-04-23T20:24:36.667 回答