Iframe inside td tag

HTML & CSS
1

I have an iframe inside a td tag, <td class="right-menu", rowspan="6" padding=0px><iframe id="data" frameBorder="0" width="100%" height="100%" src="home.html"></iframe></td>

But the problem is that, I have border or padding around the iframe. How can I remove it so that the iframe fits 100% inside the td tag with out showing the white empty space?

This is my CSS for iframe

iframe {
   margin: 0px;
   padding: 0px;
   background: blue;
   border: 0px;
   display: block;
   line-height: 0px;
}
2

Could the padding be on the element inside the ifram?

If it is a web page, perhaps that page should reset its defaults:

body {
    margin: 0;
    padding: o:

Or tell us what loads in the iframe?

1 Like
3

Image

Please click on the image to see my problem. I added margin and padding 0 inside body but its still doing the same.

4

So if you put a border or background to the iframe, the space would be seen outside the iframe?

5

If I put a border or background to the iframe, nothing changes. I changed the border to 5, and background to blue, but it looks exactly the same

6

Same thing if I do the same in

7

Is the table set to border-collapse:collapse and the td set to vertical-align:top?

8

Yes, I also tried adding the vertical-alig:top, but looks the same in my picture. I’m new to HTML, CSS and all this stuff.

table, p {
   height: 100%;
   border-collapse: collapse;
}
9

If this is still in your code, be aware it is not legal syntax. There is no “padding” attribute for td (you’d need to put padding in your css), and the comma after “right-menu” does not belong there. So it should be something like:

<td class="right-menu" rowspan="6">

with the padding setting moved into the right-menu class in your css.

By the way, calling an iframe with a menu in it “tabular data” is quite a stretch. This has nothing to do with solving your immediate issue, but when you come up for air to revisit this code, you might consider a different way.

3 Likes
10

I corrected my iframe, and removed the comma and padding, and put padding in css, still looks the same.

11

Can you point us to a location where you have the code so we can see what you’re seeing?

12 
<!DOCTYPE html>
<html>
  <head>
    <title>SCA Checklist</title>
    <script type="text/javascript" src="/eel.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js">
      eel.expose(test);     
    </script>
  </head>
  <body>
  <table class="table table-borderless">
	  <tr class="title">
	    <td colspan="2">SCA Warehouse Checklist</td>
	  </tr>
	  <tr>	    
	    <td class="menu" width="50%" id="menu_table"><img src="icons/home.png"></img><a href="#none" onclick=reset_view()>&nbsp&nbsp&nbsp&nbsp&nbspHome</a></td>
	    <td class="right-menu" rowspan="6"><iframe id="data" width="100%" height="100%" src="home.html"></iframe></td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/aeriallift.png"><a href="#none" onclick=show_pdf()></img>&nbsp&nbsp&nbsp&nbsp&nbspAerial Lifts</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/mower.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspLawn Equipment</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/lift.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspLift Trucks</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/Inventory.png"></img>&nbsp&nbsp&nbsp&nbsp&nbspInventory</td>
	  </tr>
	  <tr>
	    <td class="menu"><img src="icons/about.png"></img>&nbsp&nbsp&nbsp&nbsp&nbsp<a href="#none" onclick=show_about()>About</a></td>
	  </tr>
</table>
  </body>
</html>
13 
body, html {
   height:100%;
   margin: 0;
   padding: 0;
}

table, p {
   height: 100%;
   border-collapse: collapse;
}

iframe {
   margin: 0px;
   padding: 0px;
   border: 0px;
   display: block;
}

.title {
   background-color:#0b2e4d;
   color: #fff;
   font-weight: bold;
   }

.menu {
   background-color:#384038;
   color: #fff;
   font-weight: bold;
   }

.right-menu {
   background-color:#fff;
   color: #0b2e4d;
   font-weight: bold;
   vertical-align: middle;
   text-align: center;
   } 

a {
   color: #fff;
   font-weight: bold;
} 

a:hover {
   color: #fff;
   font-weight: bold;
   text-decoration: none;
}

embed {
   width: 100%;
   height: 100%;
}
14

I added my html and css

15

I mostly code in Python, so the eel.js you see in my html is a Python library that I’ll be using later, in case you’re wondering.

16

What about the HTML/CSS for home.html?

17

This is home.html

<html>
	<head>
		<script type="text/javascript" src="/eel.js"></script>
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    	<link rel="stylesheet" href="style.css">
    	<p class="jumbotron" style="font-weight: bold;">SCA Warehouse Checklist</p>
	</head>
</html>
18

well for starters, you shouldnt put display elements in your head tag.

what’s the css for this page?

1 Like
19

It’s the padding on the table cell :slight_smile:

.table td.right-menu{padding:0}

Don’t keep using height:100% as it doesn’t work like that :slight_smile:

3 Likes
20

`.table td.right-menu{padding:0}

Fixed the issue :grinning:

I don’t know how to mark this as the correct post, but thanks

1 Like