如何指定td
標記應跨越所有列(當表格中列的確切數量將變爲/難以確定何時呈現HTML)? w3schools提到你可以使用colspan="0"
,但它並沒有明確說明哪些瀏覽器支持該值(我們的列表中支持IE 6)。Colspan所有列
編輯:似乎將colspan
設置爲大於您可能具有的理論列數的值將會工作,但如果您將表格佈局設置爲固定值,則它不起作用。使用colspan
的大號自動佈局有什麼缺點?有沒有更正確的方法來做到這一點?
如何指定td
標記應跨越所有列(當表格中列的確切數量將變爲/難以確定何時呈現HTML)? w3schools提到你可以使用colspan="0"
,但它並沒有明確說明哪些瀏覽器支持該值(我們的列表中支持IE 6)。Colspan所有列
編輯:似乎將colspan
設置爲大於您可能具有的理論列數的值將會工作,但如果您將表格佈局設置爲固定值,則它不起作用。使用colspan
的大號自動佈局有什麼缺點?有沒有更正確的方法來做到這一點?
我有IE 7.0,火狐3.0和Chrome 1.0
在TD的合併單元格= 「0」 屬性爲NOT跨越橫跨所有TD在任何上述瀏覽器的。
也許不推薦作爲適當的標記練習,但如果您給出的的colspan值高於可能的總數。在其他行中的列中,則TD將跨越所有列。
當table-layout CSS屬性設置爲fixed時,這不起作用。
再次,這不是一個完美的解決方案,但似乎在上述3個瀏覽器版本中工作時,表佈局CSS屬性是自動。希望這可以幫助。
對於IE 6,您需要將colspan等於表中的列數。如果你有5列,那麼你會想要:colspan="5"
。
其原因是不同的IE handles colspans,它使用HTML 3.2規範:
IE實現HTML 3.2定義,它設置
colspan=0
作爲colspan=1
。
該錯誤是well documented。
列的數量可能是可變的,我會更新我的問題,包括該評論。 – Bob 2008-12-29 21:43:10
也許我是一個直率的思想家,但我有點困惑,你不知道你的表的列號?
順便說一句,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
編輯:請複製和粘貼的鏈接,該格式將不接受雙在鏈接中的協議部分(或者我不是很聰明以正確格式化)。
嘗試使用「colSpan」而不是「colspan」。 IE喜歡camelBack版本...
;注意這在IE8中是固定的(僅在stds模式下) – scunliffe 2010-03-22 16:20:55
如果要製作跨越所有列的'標題'單元格作爲表格的標題,您可能需要使用標題標記(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>
另一個工作但醜陋的解決方案:colspan="100"
,其中100是一個值比你需要colspan
合計列大。
根據W3C的說法,colspan="0"
選項僅對COLGROUP
標籤有效。
這不適用於IE8 – 2010-03-02 18:56:52
colspan =「100」(例如超出限制)在某些情況下會導致非常奇怪的表格渲染(我會嘗試追捕一些測試用例併發布URL) – scunliffe 2010-03-22 16:19:32
這是一個黑客,確實不確保您的行跨越所有列
只要使用此:
colspan="100%"
它適用於火狐3.6,IE 7和Opera 11! (我猜別人,我不能嘗試)
如下面這個意見所實際上是一樣的colspan="100"
。因此,這種解決方案將打破與css table-layout: fixed
或超過100列的表。
你可以像這樣確定的列數在表:
var firstRow = tableBody.getElementsByTagName('tr')[0];
var numcols = firstRow.getElementsByTagName('td').length;
而現在使用此列數爲您列跨度。這假定你已經獲得了對錶的body元素的引用,但是這應該很簡單。
只是想添加我的經驗和答案。
注意:它只適用於您有預定義的table
和tr
th
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;
}
}
如果你正在使用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));
});
如果你發現一個實現此韓元沒有工作,不要抨擊答案,在評論中解釋,如果可以覆蓋,我會更新。
根據規範colspan="0"
應導致表寬度td。
但是,只有當您的桌子有寬度時,纔會出現這種情況!一個表格可能包含不同寬度的行。所以,如果你定義了一個colgroup,渲染器知道表格寬度的唯一情況!否則,合併單元格的=「0」的結果是不確定的...
http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan
我無法測試它在舊的瀏覽器,但是這是因爲4.0規範的一部分...
我有同樣的問題 - 我如何解決我的問題..把任何控制你想跨越一個TDD
什麼時候表格佈局設置爲固定?我沒有注意到這個屬性,並與這個bug進行了鬥爭,因爲帶有大的colspan的td將導致該行被推出所有其他行之外的網格。 – Bob 2008-12-29 21:51:19
如果要將表格佈局設置爲固定,較高的colspan值似乎不是一個好主意。它在所提到的3個瀏覽器中給出了不一致的結果。我會更新我的帖子以反映這一點。 – 2008-12-29 22:17:02
如果你在HTML開頭的時候指定了一個嚴格的文檔類型,那麼按照html 4.01規範的要求渲染colspan。 – Eineki 2008-12-29 23:28:08