在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的表格單元格上使用寬度自動調整

回答

相關問題