CSS可以放置標籤一個像<tr>做

有一個網頁有幾個表。其中一個內部有一個tr和> 15 td s。雖然越來越多td s，他們開始走出屏幕。CSS可以放置標籤一個像<tr>做

我想垂直放置它們，就好像它們是tr s或div s。但是：

編輯網站HTML時恐怕會破東西（可能是java模板）;
我不想用JS修補頁面，因爲這將是一個額外的問題/如何/在哪裏放置代碼的問題。

所以我想用CSS來解決這個問題，因爲如果我的同事會說我的重新設計太糟糕了，而且超出屏幕邊界，那麼我很容易設置我的個人定製CSS。另外CSS更容易編輯，並實時查看結果比編輯desctructing JS。

來源

2013-06-13 Nakilon

的表不一樣，工作的小提琴。 'td'元素是列，'tr'元素是行。 –

@JamesDonnelly，我知道。這就是我問的原因。 – Nakilon

也許使用div而不是表格？ –

正如James Donnelly在評論中告訴你的，我認爲這不是表格的正常行爲。此外，我不知道您是否使用表格進行佈局或表格數據。所以，我認爲可以將標記更改爲this example。

正如你所看到的，我做了一個替換：所有<tr>轉換成<div class="row">和所有<td>轉換成<div>。我將所有tr和td結束標記都替換爲關閉div，然後我將所有內部<div>設置爲float:left。這將所有「td」內聯，就像表格一樣，但是當它們到達頁面的邊界時開始堆疊下來。

如果您想保留標記，還有另一些修復方法進入我的腦海。

你可以將樣式爲<td>display:block。這會讓您的所有<td>下一個，但這不適用於IE7/IE8。
您可以將所有表格放在div中，並將該div設置爲overflow-x:scroll並確保max-width:100%爲this example。

希望這有助於，不要害怕破壞事物，有時是最好的學習方法！ ;）

來源

2013-06-13 11:56:28 Arkana

太糟糕了詹姆斯唐納利錯了。修改表格元素的顯示屬性是完全有效的。瀏覽器是否適當地履行是完全不同的。將表格數據填入一堆div中，因爲「不喜歡錶格的外觀」與使用表格進行佈局的目的一樣錯誤。 – cimmanon

@cimmanon我認爲這一點W3C信息有點混淆，但閱讀[表模型]（http://www.w3.org/TR/html5/tabular-data.html#table-model）我推斷「td」元素顯示爲行，打破了表模型。但我不屬於W3C的一部分，所以，我將編輯答案以表明這只是我的看法;） – Arkana

這些與CSS沒有任何關係。表元素需要保留該文檔中定義的行爲的特定顯示屬性（td，th = table-cell，tr = table-row，table = table等）以應用。 – cimmanon

您可以使用jQuery循環遍歷每個tr和td，並增加包含tr的高度，每個tr的相對位置基於第一個的大小。它只適用於某些情況下沒有colspans/rowspans和填充可能會導致問題。

var table = $('table'); 
var cellHeight = $('td',table).first().height(); 
var cellWidth = $('td',table).first().width(); 
var runningTop = 0; 
$('tr',table).each(function(i,row) { 
    var rowCells = $(this).find('td'); 
    $(this).height(cellHeight*(rowCells.length)) 
    rowCells.each(function(x,cell) { 
     $(cell).css({ "position": "relative","top":(cellHeight*x)+runningTop,"left": "-"+(cellWidth*(x))+"px" }); 
     runningTop = runningTop+cellHeight; 
    }); 
});

需要工作，但這裏的想法http://jsfiddle.net/hPhRX/1/

來源

2014-04-02 15:23:43 TheGerbil

CSS可以放置​​標籤一個像<tr>做

回答

相關問題

CSS可以放置標籤一個像<tr>做