在HTML和CSS的表格单元格上使用宽度自动调整

我有一个4列的表格，其中3个具有固定宽度，1个具有自动宽度。目前，它并没有跨越整个表格容器。

这是它应该是如何工作的： http://jsfiddle.net/05ky1xfx/4/

应跨越表行的其余部分，它不会有什么我应该调整要做到这一点，这样的width: auto;跨越行？

感谢

2014-10-10 mdixon18

我不清楚你在问什么。你的jsfiddle似乎工作。事实上，[你甚至不需要'width：auto']（http://jsfiddle.net/05ky1xfx/8/）。出了什么问题？ – showdev 2014-10-10 21:39:26

哦，我在您的编辑历史记录中看到您的实时页面。你的''和''上有'display：block'声明，这些声明搞砸了。 'style.css行：1711'和'style.css行：1716'。 – showdev 2014-10-10 21:56:19

我能够从<tbody>和<tr>消除display:block更正表。

应用display:block将这些元素更改为块元素而不是表元素并中断表流。

下面是我所做的更改：

的style.css线：1711

.forum-table, .forum-table > tbody { 
    /*display: block;*/ 
    width: 100%; 
}

的style.css线：1716

.forum-table > tbody > tr { 
    position: relative; 
    /*display: block;*/ 
    width: 100%; 
    padding: 25px; 
    background: rgba(0, 0, 0, 0.25); 
}

而且，你不<td>需要width:auto：

的style.css线：1732

.forum-table > tbody > tr > td.forum-name { 
    /*width: auto;*/ 
}

这里有一个DEMONSTRATION (jsfiddle)。

我没有包含所有的资源，所以有些东西（例如图片，javascript）区域被破坏。但问题的表格布局保持不变。

来源

2014-10-10 22:07:34 showdev

转换像素百分比（％）

一个好的简单的解决方法就是使用基于像素的网站转换为响应％的设计中标准是使用一套公式来像素宽度转换为对应的百分比。

的公式为：

公式：目标÷上下文=结果×100 =最终的百分比结果

目标是需要转换元件的象素大小。

上下文是您网站的像素大小。

所以，你的公式是：

第一个单元格： 52px÷1170px = 0.044×100 = 4.44％

最后一个单元格： 250像素÷1170px = -0.1236×100 = 21.36％

现在，您可以将所有细胞大小转换为百分比，以获得一致，可靠的结果。因此，您的单元格大小将为单元格1的4.44％，单元格2的单元格的大小为59.20％，单元格3的单元格为15％，单元格4的单元格大小为21.36％。

注意：如果转换需要精确测量，。

下面是一个易于使用的在线计算器：http://rwdcalc.com/

很好的概述变换像素的线框，以百分比：http://www.awmcreative.com/css/creating-a-flexible-grid-from-pixels-to-percentages/

来源

2014-10-10 22:15:11 Talkingrock

这看起来更好：http://jsfiddle.net/05ky1xfx/19/ – Anthony 2014-10-10 22:26:14

这是一个很好的解决方案，因为它使用百分比宽度，并不依赖于所有不同的浏览器/设备试图精确计算像素，百分比和自动全部在一张桌子里。 – Talkingrock 2014-10-10 22:43:34

是的，你不能指望某些东西是相对于其他静态宽度的宽度，并且它总是相称的。 – Anthony 2014-10-10 22:47:43

在HTML和CSS的表格单元格上使用宽度自动调整

回答

相关问题