2008-12-29 95 views
299

如何指定td標記應跨越所有列(當表格中列的確切數量將變爲/難以確定何時呈現HTML)? w3schools提到你可以使用colspan="0",但它並沒有明確說明哪些瀏覽器支持該值(我們的列表中支持IE 6)。Colspan所有列

編輯:似乎將colspan設置爲大於您可能具有的理論列數的值將會工作,但如果您將表格佈局設置爲固定值,則它不起作用。使用colspan的大號自動佈局有什麼缺點?有沒有更正確的方法來做到這一點?

回答

218

我有IE 7.0,火狐3.0和Chrome 1.0

在TD的合併單元格= 「0」 屬性爲NOT跨越橫跨所有TD任何上述瀏覽器的。

也許不推薦作爲適當的標記練習,但如果您給出的的colspan值高於可能的總數。在其他行中的列中,則TD將跨越所有列。

當table-layout CSS屬性設置爲fixed時,這不起作用。

再次,這不是一個完美的解決方案,但似乎在上述3個瀏覽器版本中工作時,表佈局CSS屬性是自動。希望這可以幫助。

+1

什麼時候表格佈局設置爲固定?我沒有注意到這個屬性,並與這個bug進行了鬥爭,因爲帶有大的colspan的td將導致該行被推出所有其他行之外的網格。 – Bob 2008-12-29 21:51:19

+1

如果要將表格佈局設置爲固定,較高的colspan值似乎不是一個好主意。它在所提到的3個瀏覽器中給出了不一致的結果。我會更新我的帖子以反映這一點。 – 2008-12-29 22:17:02

+0

如果你在HTML開頭的時候指定了一個嚴格的文檔類型,那麼按照html 4.01規範的要求渲染colspan。 – Eineki 2008-12-29 23:28:08

13

對於IE 6,您需要將colspan等於表中的列數。如果你有5列,那麼你會想要:colspan="5"

其原因是不同的IE handles colspans,它使用HTML 3.2規範:

IE實現HTML 3.2定義,它設置colspan=0作爲colspan=1

該錯誤是well documented

+1

列的數量可能是可變的,我會更新我的問題,包括該評論。 – Bob 2008-12-29 21:43:10

-2

也許我是一個直率的思想家,但我有點困惑,你不知道你的表的列號?

順便說一句,IE6不尊重colspan =「0」,有或沒有定義colgroup。 我也嘗試使用add和th來生成列組,但瀏覽器不能識別表格colspan =「0」。

我已經嘗試過在Windows和Linux上的Firefox 3.0,它只適用於嚴格的文檔類型。

您可以在

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

幾個庫巴檢查測試,我發現這裏的測試頁http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

編輯:請複製和粘貼的鏈接,該格式將不接受雙在鏈接中的協議部分(或者我不是很聰明以正確格式化)。

+0

我同意第一部分:當然你可以弄清楚你將在行中擁有多少個細胞?你會如何生成它? – nickf 2009-09-24 11:11:55

+11

不一定,我有一個使用AJAX動態生成表格的應用程序,列數可以從回調變爲回調。另外,在開發時,您可能「知道」列的數量,但這可能會改變,並且您只知道您將錯過其中一個 – 2010-05-05 11:37:56

+9

Plus,如果您以後添加列,則可能會忘記更改列表,最好總是最大。僅在使用IE並通過JavaScript和.setAttribute('colSpan',int)進行設置時才使用 – Adam 2010-09-22 21:20:37

-6

嘗試使用「colSpan」而不是「colspan」。 IE喜歡camelBack版本...

+4

;注意這在IE8中是固定的(僅在stds模式下) – scunliffe 2010-03-22 16:20:55

51

如果要製作跨越所有列的'標題'單元格作爲表格的標題,您可能需要使用標題標記(http://www.w3schools.com/tags/tag_caption.asp/https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)此元素意味着以此目的。它的行爲就像是一個div,但不會跨越表的父級的整個寬度(就像div在同一位置上做的那樣(不要在家裏試試這個!)),而是跨越表。有一些跨邊界的跨瀏覽器問題等(我可以接受)。無論如何,你可以讓它看起來像一個跨越所有列的單元格。在其中,您可以通過添加div元素來創建行。我不確定你是否可以在tr元素之間插入它,但這將是一個黑客我猜(所以不建議)。另一種選擇是與浮動divs搞亂,但這是惡作劇!

<table> 
    <caption style="gimme some style!"><!-- Title of table --></caption> 
    <thead><!-- ... --></thead> 
    <tbody><!-- ... --></tbody> 
</table> 

不要

<div> 
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div> 
    <table> 
     <thead><!-- ... --></thead> 
     <tbody><!-- ... --></tbody> 
    </table> 
    <div style="clear: both"></div> 
</div> 
4

另一個工作但醜陋的解決方案:colspan="100",其中100是一個值比你需要colspan合計列大。

根據W3C的說法,colspan="0"選項僅對COLGROUP標籤有效。

+0

這不適用於IE8 – 2010-03-02 18:56:52

+0

colspan =「100」(例如超出限制)在某些情況下會導致非常奇怪的表格渲染(我會嘗試追捕一些測試用例併發布URL) – scunliffe 2010-03-22 16:19:32

210

這是一個黑客,確實確保您的行跨越所有列

只要使用此:

colspan="100%" 

它適用於火狐3.6,IE 7和Opera 11! (我猜別人,我不能嘗試)

警告:

如下面這個意見所實際上是一樣的colspan="100"。因此,這種解決方案將打破與css table-layout: fixed或超過100列的表。

0

你可以像這樣確定的列數在表:

var firstRow = tableBody.getElementsByTagName('tr')[0]; 
var numcols = firstRow.getElementsByTagName('td').length; 

而現在使用此列數爲您列跨度。這假定你已經獲得了對錶的body元素的引用,但是這應該很簡單。

0

只是想添加我的經驗和答案。
注意:它只適用於您有預定義的tabletrth s,但會在您的行(例如通過AJAX)中動態加載。

在這種情況下,您可以計算第一個標題行中存在的th的數量,並使用它來跨越整個列。

如果您希望在未找到結果時轉發消息,則可能需要此選項。

像這樣的事情在jQuery的,其中table是你的輸入表:

var trs = $(table).find("tr"); 
var numberColumns = 999; 
if (trs.length === 1) { 
    //Assume having one row means that there is a header 
    var headerColumns = $(trs).find("th").length; 
    if (headerColumns > 0) { 
     numberColumns = headerColumns; 
    } 
} 
8

如果你正在使用jQuery(或不介意將它添加),這將讓這項工作比任何做得更好這些黑客。

function getMaxColCount($table) { 
    var maxCol = 0; 

    $table.find('tr').each(function(i,o) { 
     var colCount = 0; 
     $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) { 
      var cc = Number($(oo).attr('colspan')); 
      if (cc) { 
       colCount += cc; 
      } else { 
       colCount += 1; 
      } 
     }); 
     if(colCount > maxCol) { maxCol = colCount }; 
    }); 

    return maxCol; 

} 

爲了方便實施,我裝點任何TD /日我需要一個類如「MAXCOL」那麼我可以做以下調整:

$('td.maxcols, th.maxcols').each(function(i,o) { 
    $t = $($(o).parents('table')[0]); $(o).attr('colspan', getMaxColCount($t)); 
}); 

如果你發現一個實現此韓元沒有工作,不要抨擊答案,在評論中解釋,如果可以覆蓋,我會更新。

0

根據規範colspan="0"應導致表寬度td。

但是,只有當您的桌子有寬度時,纔會出現這種情況!一個表格可能包含不同寬度的行。所以,如果你定義了一個colgroup,渲染器知道表格寬度的唯一情況!否則,合併單元格的=「0」的結果是不確定的...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

我無法測試它在舊的瀏覽器,但是這是因爲4.0規範的一部分...

0

我有同樣的問題 - 我如何解決我的問題..把任何控制你想跨越一個TDD