从嵌入式 Google 表格中删除 Google 边框答案

【问题标题】：Remove Google Border From Embedded Google Sheet从嵌入式 Google 表格中删除 Google 边框
【发布时间】：2020-08-30 01:04:48
【问题描述】：

我希望将 Google 表格嵌入到 Google 扩展程序中。很简单——只需使用自动生成的嵌入代码并将其粘贴到 html 文件中。这就是我所做的：

<html>
  <link rel="stylesheet" href="extension.css">
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
</html>

结果是这样的：https://imgur.com/CopCfvL。我只想要带有“TEAM”和“SCORE”列的表格，有没有办法摆脱谷歌边框（即“颜色战争评分：Sheet2”和下面的标签）？我一直在寻找删除它的内置方法，似乎曾经有过，但现在没有了。话虽如此，我觉得应该有一个足够简单的解决方法，可能使用 JavaScript。我只是不太了解。

感谢您的帮助！

【问题讨论】：

标签： javascript html css google-apps-script google-sheets

【解决方案1】：

iframe {
  margin-top: -30px; /* Cut off top bar */
  margin-bottom: -30px; /* Cut off bottom bar */
}

div {
  overflow: hidden; /* Makes cutoff work */
  border: 2px solid black; /* Just for aesthetics, can be removed */
  display: inline-block; /* Fit div to contents */
}

<html>
  <link rel="stylesheet" href="extension.css">
  <div>
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
  </div>
</html>

这不是最漂亮的东西，但我认为我们可以使用容器<div> 元素和负垂直边距来实现您想要的。

【讨论】：