Remove Google Border From Embedded Google Sheet

问题

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.com/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://imgur.com/CopCfvL. 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!

回答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>

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.

来源：https://stackoverflow.com/questions/63653100/remove-google-border-from-embedded-google-sheet

标签

javascript

html

css

google-apps-script

google-sheets