使所有細胞相同的寬度（與jQuery？）

如果我有以下表結構：使所有細胞相同的寬度（與jQuery？）

<table cellpadding="0" cellspacing="0" border="0" width=100%> 
<tr> 
    <th> 
    </th> 
    <th> 
    Col Header 1 
    </th> 
    <th> 
    Col Header 2 
    </th> 
    <th> 
    Col Header 3 
    </th> 
</tr> 
<tr> 
    <th> 
    Row Header 
    </th> 
    <td> 
    cell 1 
    </td> 
    <td> 
    cell 2 
    </td> 
    <td> 
    cell 3 
    </td> 
</tr> 
</table>

如何使所有TD相同的寬度？請注意我在我的行開頭有TH。如果需要，我可以使用jQuery。

編輯：

從下面的建議，我開始更傾向於jQuery的解決方案。基本上，我需要做的是：

獲取表
的寬度從1號
鴻溝其餘獲取TH的寬度在行的開頭
減去＃2達陣

我認爲這是一個有點令人費解，但應該做的工作的數...

來源

2011-05-16 santa

啊，有一兩件事只是打我。您是否在問如何根據內容讓列的寬度有所不同，但將所有列的寬度設置爲與最寬的寬度相同？因爲這將是一個完全不同的問題，而我們迄今爲止所有的答案都是這樣......而且，這會比較困難...... – 2011-05-16 16:49:36

有沒有你不能使用CSS的理由？

td { 
    width: 300px; 
}

如果希望所有TD：■和 TH：s到具有相同的寬度，只需設置寬度上TH代替：

th { 
    width: 300px; 
}

的TD：■將得到他們的寬度從列中，列將從TH：s獲得寬度。

編輯：編輯您的問題使得它更容易理解你想要做什麼:)

我肯定會考慮與CSS靈活盒模型（Flexbox的）用於兼容的瀏覽器這樣做。 http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

您可以使用Modernizr的檢查Flexbox的兼容性：http://www.modernizr.com/

由於做你想做的與所需的JavaScript代碼的可能的混亂，我也會考慮是否較少功能的瀏覽器真的需要這個功能與否。

不，這是不可能實現它在JavaScript雖然，一點都沒有。

如果靜態加載後在表中的數據，它應該是相當直截了當搶表第一列的寬度，並在列的其餘部分分割剩餘。

如果表中的內容可能會被然而最初加載後更改，您將需要理清如何檢查更改，每次重新申請新的風格。你可能會放置一些事件監聽器，但哪些事件需要監聽取決於什麼樣的行動可能會改變表的內容...

另外請記住，用戶可以縮放網頁的文本。這可能弄亂列的寬度也一樣，我猜...

來源

2011-05-16 16:41:20

只是一個想法，因爲他使用的是側面（而不是頂部），不會只對齊第一列 – Ben 2011-05-16 16:44:23

他在上面使用TH：s。查看第一個TR的內容。否則，你會是對的，是的。 – 2011-05-16 16:47:11

我不知道桌子可能是什麼。 – santa 2011-05-16 16:47:57

你可以只用CSS做。
如果你需要它們，你應該加上th。喜歡的東西

table tr td 
{ 
    width: 400px; 
}

或者，使用jQuery

$('table tr td').each(function() {$(this).css('width','400px');});

或修訂（阿德里安）

$('table tr td').css('width','400px');

來源

2011-05-16 16:41:31 Ben

您不需要調用.each（） - $（'table tr td'）。css（'width'，'400px'）;會做同樣的事情。 – 2011-05-16 16:45:35

舊習慣，很高興知道。 – Ben 2011-05-16 16:49:03

當你知道該表的像素寬度它更容易風格td寬度。

例如，如果width = 300px那麼每個td的樣式可以爲100px。

但是，如果您的表必須是width = 100%那麼您可以將每個td的寬度設置爲33％。

如果你有padding，margins，或borders上table，這些都會影響td的寬度。

來源

2011-05-16 16:45:35

設置寬度百分比：

td, th { width: 33%; }

來源

2011-05-16 17:04:58

使所有細胞相同的寬度（與jQuery？）

回答

相關問題