HTML/CSS表格佈局固定但希望一個td的寬度更小

我有一個包含4列的表格。我希望第一個是固定的5％，接下來的3個是固定的20％。所以爲了確保最後3個寬度總是與我使用的寬度相同table-layout:fixed。但是，這導致第一個td與最後3列的寬度相同。HTML/CSS表格佈局固定但希望一個td的寬度更小

這裏是我的HTML：

<tr> 
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td> 
<td>{{COMPONENT_NAME}}</td> 
<td>{{CO}}</td> 
<td>{{PANEL_OPTIONS}}</td> 
</tr>

我的CSS：

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;} 
.creatorOptionsTable tr {border-bottom: 1px solid black;} 
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word} 
.creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important; text-align: center; border-left: none;}

注意，我知道，我還沒有包括在這個<table>標籤。但它在那裏。

看起來像這應該很容易，但不會工作。

那麼這裏是我的全部代碼：

<table id="creatorOptionsAddTable" class="creatorOptionsTable"> 
<tr class="firstRow"> 
    <th clas="groupsOptionsCheckboxCell"></th> 
    <th>Component</th> 
    <th>Description</th> 
    <th>Panel</th> 
</tr> 
<tr> 
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td> 
<td>{{COMPONENT_NAME}}</td> 
<td>{{COMPONET_DESCRIPTION}}</td> 
<td>{{PANEL_OPTIONS}}</td> 
</tr> 
</table>

來源

2012-07-27 user1513171

爲什麼你不用純HTML做這個，如果這個CSS是給的問題。如果將是一個非常有用的，你可以在[jsfiddle]（http://jsfiddle.net/QWsZT/） – 2012-07-27 02:22:35

中創建這個場景這裏是我的場景是jsfiddle： http://jsfiddle.net/QWsZT/1/ – user1513171 2012-07-27 02:35:05

首先，你誤會這意味着什麼：

.creatorOptionsTable { width: 80%; }

這臺表元素的父元素的80％。所以，如果你的父母是1000px - 這將告訴瀏覽器，「使這張桌子800px」。那麼，它命令列的寬度。

其次，如果要設置每列的寬度，它必須等於100％。瀏覽器無法計算總計少於100％的所有列。這就像是說：有8片披薩：喬吃了1，約翰吃了2，山姆吃了2，史蒂夫吃了2 - 我們吃了整個披薩 - 錯了。

瞭解，如果你想要一列是其他三列的四分之一。應該是8％，30％，31％，31％（或者只是10,30,30,30）。或者，您可以將3的寬度設置爲相同，而狹窄將填充剩餘空間。

來源

2012-07-27 11:14:23

這應該只是罰款。這不是所有的HTML，但對嗎？確保你聲明瞭表類。我編輯了代碼，將您的整個HTML示例考慮在內。問題在於你沒有聲明CSS規則，所以它們影響了你的tds的寬度。讓我知道如果這仍然不起作用，雖然它在jsfiddle（http://jsfiddle.net/QWsZT/2/）中工作正常。

HTML：

<table id="creatorOptionsAddTable" class="creatorOptionsTable"> 
<tr class="firstRow"> 
    <th class="groupsOptionsCheckboxCell"></th> 
    <th>Component</th> 
    <th>Description</th> 
    <th>Panel</th> 
</tr> 
<tr> 
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td> 
<td>{{COMPONENT_NAME}}</td> 
<td>{{COMPONET_DESCRIPTION}}</td> 
<td>{{PANEL_OPTIONS}}</td> 
</tr> 
</table>

CSS：

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;} 
.creatorOptionsTable tr {border-top: 1px solid black;} 
.creatorOptionsTable tr.firstRow {border-top: none;} 
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word} 
.creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important; text-align: center; border-left: none;} 
.creatorOptionsTable th {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word} 
.creatorOptionsTable th.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important; text-align: center; border-left: none;}

來源

2012-07-27 02:23:44 Johnnyoh

你如何在評論中發佈代碼？我將包括我的整個事情。 – user1513171 2012-07-27 02:32:06

檢查更新的代碼，它應該工作。我已經包括了jsfiddle。 – Johnnyoh 2012-07-27 10:50:20

啊！我找到了。在我決定使用表佈局之前，我已經有了這個功能：fixed：

.creatorOptionsTable {width: 80%;}

拿出來，它是固定的。無論如何，感謝您的幫助！

來源

2012-07-27 02:41:39 user1513171

不，實際上並沒有解決它。現在消失了，右邊的3列長度不同。 – user1513171 2012-07-27 02:43:12

唉唉，所以你在做你的第一個標籤愚蠢的錯誤檢查你寫

<th clas="groupsOptionsCheckboxCell"></th>

你認爲其右的。

來源

2012-07-27 04:41:45

集td一般寬度喜歡30px並用max-width修復它，然後將其他3〜20％的寬度與經常性+td（td+td意味着第二td和上，td+td+td意味着第三td和等..）

/*Set first (general) width fixed*/ 
.creatorOptionsTable td { 
    width: 30px; 
    max-width: 30px; 
} 
/*Set recurring cells' width 20%*/ 
.creatorOptionsTable td+td { 
    width: 20%; 
}

也把表div內具有80％的寬度，並設置該表的寬度100%：

div.container { 
    max-width: 80%; 
} 
.creatorOptionsTable { 
    width: 100%; 
    word-wrap: break-word; 
}

來源

2012-07-27 11:20:41

HTML/CSS表格佈局固定但希望一個td的寬度更小

回答

相關問題