admin管理员组

文章数量:1336631

I'm looking to embed a Google Sheet into a Google Extension. Simple enough — just use the autogenerated embed code and stick it into an html file. This is what I did:

<html>
  <link rel="stylesheet" href="extension.css">
  <iframe
    width="250px"
    height="250px"
    src=";amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
</html>

The result is this: .jpg. I just want the table with columns "TEAM" and "SCORE", is there a way to get rid of the Google border (i.e., "Color Wars Scoring : Sheet2" and the tab below)? I've looked for built-in ways to remove it and it seems like there once was, but not any more. That being said, I feel like there should be a simple enough work around, possibly with JavaScript. I just don't know enough to figure it out.

Thank you for your help!

I'm looking to embed a Google Sheet into a Google Extension. Simple enough — just use the autogenerated embed code and stick it into an html file. This is what I did:

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

The result is this: https://i.sstatic/U1EfH.jpg. I just want the table with columns "TEAM" and "SCORE", is there a way to get rid of the Google border (i.e., "Color Wars Scoring : Sheet2" and the tab below)? I've looked for built-in ways to remove it and it seems like there once was, but not any more. That being said, I feel like there should be a simple enough work around, possibly with JavaScript. I just don't know enough to figure it out.

Thank you for your help!

  • javascript
  • html
  • css
  • google-apps-script
  • google-sheets
Share Improve this question edited Aug 30, 2020 at 3:51 TheMaster 50.9k7 gold badges70 silver badges99 bronze badges asked Aug 30, 2020 at 1:04 reisnern21reisnern21 1372 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5 

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./spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
  </div>
</html>

It's not the most beautiful thing, but I think we can achieve what you want using a container <div> element and negative vertical margins.

You can edit the query string parameters to hide the top and bottom bars.

What you need here is chrome=false (hide the title above) and widget=false (hide the tabs below):

<html>
  <iframe
    height="170"
    width="450"
    frameBorder="0"
    src="https://docs.google./spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=false&headers=false&chrome=false">
  </iframe>
</html>

Details of other options here: Google sheet embed URL documentation

本文标签： javascriptRemove Google Border From Embedded Google SheetStack Overflow

版权声明：本文标题：javascript - Remove Google Border From Embedded Google Sheet - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742413481a2470252.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。