具有相同宽度和高度TD的响应表 [英] Responsive table with equal width and height TDs

问题描述

如何创建每个单元格/ TD具有相同宽度和高度的响应式HTML表格？所以，当我调整浏览器窗口的大小或调整表格的容器大小时，表格的大小将会调整，但每个单元格的高度和宽度都是相等的。

基金会不负责那。当我以固定宽度和高度以像素初始化TD时，在调整浏览器宽度时，它将水平缩小td，但不保持相同的宽高比。

我使用Foundation作为我的基础响应框架。

解决方案

以下是一种可行的方法。 / p>

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

 表{
 border-collapse：collapse; 
宽度：100％; 
} 
 td {
 width：50％; 
填充底部：50％; 
 display：inline-block; 
 
 
 
 $ b 
通过将填充设置为与宽度相同，我们创建了一个正方形在调整大小时保持宽高比。我们还需要使用 display：inline-block; 来覆盖默认的 display：table-cell; 一个单元展开以适应它的父表。  border-collapse：collapse; 也很重要，因为它会覆盖任何与表格相关的边框呈现。  然而，这种方法由于表格呈现的方式，很可能是某种尺寸的像素。它完美适用于div （您可以改用它，我猜测） - 即使没有边框-collapse definition。
 
 
 
完美适用于表格的另一种方式是使用 vw 单位。更复杂一些，因为他们从视口中获取大小，所以您需要考虑整个表大小所占的视口比例。  1vw 是视口的1％。你会从链接中看到它是完美的。
 表格{
 width：100％; 
 border-collapse：collapse; 
} 
 td {
 height：15vw; 
 width：15vw; 
 display：inline-block; 
} 
  
 
 
 单位是还没有得到很好的支持（旧的IE浏览器，一些移动浏览器），所以它可能是值得使用的后备。
 
How can I create a responsive HTML table that each cell/TD has equal width and height? So when I resize the browser window or resize the table's container, the table will resize, but each cell will have equal height and width.

Foundation doesn't take care of that. When I initialize the TD with fixed width and height in pixels, when resize the width of the browser, it shrinks the td horizontally, but doesn't keep the same aspect ratio.

I am using Foundation as my my base responsive framework.
解决方案
Below is a way of doing it that 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 padding to be the same as the width we create a square that maintains it's aspect ratio on resize. We also need to use display: inline-block; to override the default display: table-cell; which will make a cell expand to fit it's parent table. border-collapse: collapse; is also important as it overrides any table related border rendering.

However, this method may well be a pixel out at some sizes due to the way tables render. It works perfectly for divs (which you could use instead, I'm guessing) - even without the border-collapse definition.

Another way which will work perfectly for tables is to use vw units. A bit more complex as they take there size from the viewport, so you'll need to consider what proportion of the viewport your overall table size is. 1vw is 1% of the viewport. You'll see from the link that it's perfect.
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    height: 15vw;
    width: 15vw;
    display: inline-block;
}
vw units are not so well supported yet (old IEs, some mobile browsers) so it would probably be worth using a fallback.

                        
这篇关于具有相同宽度和高度TD的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！