How to make a table with iframe responsive?

@darion 

To make a table with an iframe responsive, you can use CSS to set the dimensions of the iframe to be a percentage of the container or screen size rather than fixed pixel dimensions. Here is an example of how you can make a table with an iframe responsive:

1. Create a container div for the table with a specific class or ID:

1
2
3

<div class="table-container">
  <iframe src="your-iframe-url-here"></iframe>
</div>

1. Apply CSS to make the iframe responsive:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.table-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.table-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

In this example, the padding-bottom property of the container div is set to maintain a 16:9 aspect ratio for the iframe. You can adjust this value to accommodate different aspect ratios.

By setting the width and height of the iframe to 100%, it will resize based on the dimensions of its parent container, making it responsive and adjusting its size according to the screen or device it is being viewed on.