html - Responsive table with equal width and height TDs -

how can create responsive html table each cell/td has equal width , height? when resize browser window or resize table's container, table resize, each cell have equal height , width.

foundation doesn't take care of that. when initialize td fixed width , height in pixels, when resize width of browser, shrinks td horizontally, doesn't keep same aspect ratio.

i using foundation my base responsive framework.

below way of doing work .

https://jsfiddle.net/ocp36ulb/32/

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

by setting padding same width create square maintains it's aspect ratio on resize. need use display: inline-block; override default display: table-cell; make cell expand fit it's parent table. border-collapse: collapse; important overrides table related border rendering.

however, method may pixel out @ sizes due way tables render. works divs (which use instead, i'm guessing) - without border-collapse definition.

another way work tables use vw units. bit more complex take there size viewport, you'll need consider proportion of viewport overall table size is. 1vw 1% of viewport. you'll see link it's perfect.

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

vw units not supported yet (old ies, mobile browsers) worth using fallback.