Question

我使用jQuery脚本将WordPress帖子的所有lookup()附加到类<table>的{{1}}上。

这样，我可以使每个表在已发布文章上的移动设备上滚动。

jQuery：

<div>

CSS：

.table_container

由于无法使用Javascript，如何在 AMP 上执行相同的操作？

我当前正在使用AMP for WP

Answer 1

不太漂亮的答案是...使用PHP。

<?php
$content = apply_filters('the_content', get_the_content());
$content = str_replace('<table', '<div class="table_container"><table', $content);
$content = str_replace('</table>', '</table></div>', $content);
echo $content;
?>

Answer 2

由于AMP不允许使用任意JS，因此applied design principles之一就是在正确的层（例如服务器端，CSS）解决此类问题。在特定情况下，您可以按照here中的说明，仅使用CSS使表格可滚动：

table {
  margin: auto;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
}

或者您可以按照先前答案中的建议在PHP中生成标记。这些方法消除了对JS代码的需求，使其适合AMP。

AMP：添加到<div>

2 个答案: