更改表格中的頂點高度

有沒有辦法改變table中thead的高度？我曾嘗試過更改表格中的頂點高度

$('thead').height('2px');

但無濟於事，身高並沒有改變。

我在做什麼錯？謝謝

來源

2011-10-22 G-Man

你試圖達到什麼樣的效果？您可以通過在表格上設置邊框或在主體的第一行上填充內容（因爲很難想象您的內容位於2像素高的區塊中）而能夠獲得您想要的內容。 – tvanfosson

這可能是依賴於瀏覽器。一些瀏覽器可能會將thead元素視爲一個容器，而沒有它自己的高度。嘗試使用Javascript或CSS設置TH元素本身的高度。請注意，要獲得小於線條高度的東西，您還必須設置線條高度，因爲表格元素將調整大小以適合其內容。

$('thead th').css({ height: '2px', line-height: '2px' });

或

<style> 
    .header th { 
     height: 2px; 
     line-height: 2px; 
    } 
<style> 

<table> 
    <thead class="header"> 
     <th>Foo</th> 
     ... 
    </thead> 
    ... 
</table>

由於@Marco在他的例子指出，你可能也迫使被當作一個塊級元素的THEAD並設置它直接的身高。根據你想要完成的內容以及THEAD中包含的內容，這可能會也可能不會做你想做的事。有關您想要實現的更多信息可幫助我們爲您找到合適的解決方案。

來源

2011-10-22 13:59:45 tvanfosson

Dosent似乎工作，請參閱http://jsfiddle.net/KWbxL/2/或http://jsfiddle.net/KWbxL/3/ - 它必須與如何處理表有關，因爲它總是試圖使內容可見...此線程達到了我的興趣:) –

@MarcoJohannesen - 我不認爲你可以調整小於它的內容的表元素。我假設對於2像素的行，你只需要有空格並設置行高。似乎在第一個主體行上使用填充會更合適，但我正在等待來自OP的更新來澄清。 http://jsfiddle.net/KWbxL/4/ – tvanfosson

我最初制定了基於你的例子，其中*增加了標題的高度。當然，如果你將它縮小，你必須考慮調整大小的行爲，並確保內容不會超過你想要的大小。還有一個很好的理由，不要不恰當地使用表格進行佈局！ – tvanfosson

似乎工作正常。

http://jsfiddle.net/KWbxL/1/

其顯示爲一個表，其斜面具有LESS高度，比它的內容。所以，如果你需要2px的高度，你需要顯示：block和overflow：hidden隱藏內容（它不適合2px）。

爲什麼不使用CSS，而不是使用JS做你的造型:)

來源

2011-10-22 13:55:02

在Safari中不起作用。我必須在TH元素上設置一個高度才能在Safari中工作。 – tvanfosson

嗯..更新後的代碼。你可以再次檢查:) –

謝謝 - 這有助於 –

更改表格中的頂點高度

回答

相關問題