Geek Answers Handbook

Responsive table with the same width and height TDs

How to create a flexible HTML table so that each cell / TD has equal width and height? Therefore, when I resize the browser window or resize the table container, the table will resize, but each cell will have the same height and width.

The fund will not take care of this. When I initialize a TD with a fixed width and height in pixels, when I resize the browser, it decreases td horizontally, but does not maintain the same aspect ratio.

I use Foundation as my base system supporting the base.

+6
source share
2 answers

Below is a way to do this, which will work.

https://jsfiddle.net/ocp36uLb/32/

table { border-collapse: collapse; width: 100%; } td { width: 50%; padding-bottom: 50%; display: inline-block; }

By setting the margins to be the same as the width, we create a square that maintains its aspect ratio when resizing. We also need to use display: inline-block; to override the default display: table-cell; which will make the cell expandable to fit it. border-collapse: collapse; also important as it overrides any visualization of the bounds associated with the table.

However, this method may be a pixel in some sizes due to the way tables are displayed. It works great for divs (which you could use instead, I suppose) - even without defining a border limit.

Another way that works great for tables is to use vw units . A bit trickier as they take the size from the viewport, so you will need to consider how much of the viewport has the total size of the table. 1vw is 1% of the viewing area. You will see from the link that this is perfect.

 table { width: 100%; border-collapse: collapse; } td { height: 15vw; width: 15vw; display: inline-block; }

vw units are not very well supported (old IE, some mobile browsers), so it’s probably worth using a reserve.

+7
source

This works well if you have no content in the <td> . But with some content, indentation is additional to the height of the content. see example below:

 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;"> <tbody> <tr> <td style="width: 100%; padding-bottom: 100%; background-color: #896464">Lorem ipsum dolor sit amet.</td> </tr> <tr> <td style="width: 100%; padding-bottom: 100%; background-color: #20A034">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</td> </tr> </tbody> </table>
0
source

More articles:


All Articles