是否有語義CSS或HTML屬性/屬性顯示table
與&列交換?是否有可以交換表格的行和列的CSS/HTML屬性/屬性?
換句話說,我想用一種方式編寫代碼,但有些東西可以用列翻轉行,反之亦然。
環顧四周,我才發現JavaScript的方式來交換他們,但對我來說 - 這不是我要找的。 (如果沒有一個CSS/HTML解決方案,那麼我寧願重構代碼。)
是否有語義CSS或HTML屬性/屬性顯示table
與&列交換?是否有可以交換表格的行和列的CSS/HTML屬性/屬性?
換句話說,我想用一種方式編寫代碼,但有些東西可以用列翻轉行,反之亦然。
環顧四周,我才發現JavaScript的方式來交換他們,但對我來說 - 這不是我要找的。 (如果沒有一個CSS/HTML解決方案,那麼我寧願重構代碼。)
不是我所知道的。看起來你想要做這樣的事情:
How to invert (transpose) the rows and columns of an HTML table?
我明白您的顧慮,但目前,答案是否定的:
有沒有乾淨的方式做它僅與HTML和CSS有關。 (雖然rotating the table's cells 90°肯定是有趣的。)
這種情況有幾個選項,如你所說自己:
重構你的代碼(如手動重新編碼表,用一個腳本/自動化,或者在Google Docs電子表格中執行,並以HTML格式導出 - 幾年前可能會使用)。
如果您不想重構,請使用JavaScript執行切換;或者使用JavaScript作爲功能來切換重構的代碼 - 以防萬一您希望網站上有一個按鈕,即"Flip Table"
。
嘗試使用CSS旋轉單元格的方法proposed and experimental。
這取決於你想要什麼和你的實現細節。我想說的是,漸進式增強的JaveScript在大多數人的書中都是乾淨的代碼(但在這種情況下,它不會優雅地退化,因爲沒有JS訪問的人會看到原始的HTML表)。搜索引擎也會選擇JS。
抱歉,沒有沒有。
您可能是通過將整個表旋轉90度,然後以相反的方向旋轉90度來實現某些東西。您可能還需要手動設置所有元素的高度和寬度,以使其看起來合理。
雖然這將是一個主要的黑客;我真的不會推薦它。
這裏沒有任何其他的CSS解決方案;當然不是「標準」的一個。這不是一個標準的事情想要做。
但實際上至少有兩種不同的CSS解決方案。
有這個解決方案由大衛·布舍爾(使用Flexbox的): http://dbushell.com/2016/03/04/css-only-responsive-tables/
,該溶液(使用浮動)
tr { display: block; float: left; }
th, td { display: block; }
重構代碼。 – Jrod