AMP：将 <table> 添加到 <div>

Question

我使用 jQuery 脚本将 WordPress post 的所有 <table> 附加到具有 class [=16= 的 <div> ].

通过这种方式，我可以使已 post 编辑的文章的每个 table 都可以在移动设备上滚动。

jQuery:

for (var r = document.querySelectorAll("#post table"), m = 0; m < r.length; m++) {
    var i = r[m],
        d = document.createElement("div");
    i.parentElement.insertBefore(d, i), d.className = "table_container", d.appendChild(i)
}
e(".table_container").before("<small>Scroll to see more</small>");

CSS:

.post .table_container {
    max-width: 100%;
    overflow-x: auto;
}

我如何在 AMP 上执行相同的操作，因为无法使用 Javascript？

我目前正在使用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 is to solve issues like this at the right layer (e.g. server side, CSS). In your particular case, you can make the tables scrollable using only CSS as described here:

之一

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：将 <table> 添加到 <div>

AMP: add <table> to a <div>

javascript

wordpress

amp-html