在项目之前添加数据文本

Question

我遇到了一个 WordPress 插件的问题，它创建了一个表格，但在移动设备上遗漏了 TH 信息。我希望“数据”文本/数据显示在表格数据之前。

我想要实现的示例

<*h4 class="someClassName">Article Name</h4*><br>BBD4<br><*h4 class="someClassName2">NFF</h4*><br>000-0000
等

我想用jQuery抓取data-th并插入(".table-value").before。

<tr id="table-row-576" class="table-row even" role="row">
<td data-th="Article name" class="table-value-at table-value">BBD482</td>
<td data-th="NFF" class="table-value-at table-value">111-0000</td>
<td data-th="Width" class="table-value-at table-value">250 - 370 mm</td>
<td data-th="weight" class="table-value-at table-value">13 kg</td>
<td data-th="Quantity" class="table-value-qt table-value"></td>
</tr>

Answer 1

考虑以下 CSS 解决方案。

@media only screen and (max-device-width: 480px) {
  table.myTable thead th {
    display: block;
  }
}

<table class="myTable">
  <thead>
    <tr>
      <th>Article Name</th>
      <th>NFF</th>
      <th>Width</th>
      <th>Weight</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="table-row-576" class="table-row even" role="row">
      <td data-th="Article name" class="table-value-at table-value">BBD482</td>
      <td data-th="NFF" class="table-value-at table-value">111-0000</td>
      <td data-th="Width" class="table-value-at table-value">250 - 370 mm</td>
      <td data-th="weight" class="table-value-at table-value">13 kg</td>
      <td data-th="Quantity" class="table-value-qt table-value"></td>
    </tr>
  </tbody>
</table>

要查看实际情况，请在 Full Page 中显示 sn-p，然后更改窗口大小。一旦小于480像素，像手机一样，就会把每一个TH变成一个块显示，所以它们各占一行。

您也可以使用 jQuery 来做到这一点。它只需要一个事件来检查window 或document 宽度。无论如何，CSS 都会这样做。

使用 WordPress，通常最好制作标准的 HTML 元素。因此，如果您正在使用 jQuery 构建表格，请确保创建所有正确的元素。要调整外观，只需使用 CSS，直接内联（首选）或通过 CSS。这样 WP 仍然可以应用它的主题和样式。更新主题后，您不会丢失所有自定义设置。