更改HTML表結構

假設我有一個3x2 HMTL表：更改HTML表結構

<table> 
    <tr> 
    <td> <div id="content1"></div> </td> 
    <td> <div id="content2"></div> </td> 
    <td> <div id="content3"></div> </td> 
    </tr> 
    <tr> 
    <td> <div id="content4"></div> </td> 
    <td> <div id="content5"></div> </td> 
    <td> <div id="content6"></div> </td> 
    </tr> 
</table>

這是罰款時，屏幕處於橫向模式（即 - width > height）

假設height > width，有的動態的方式改變表於以下表2x3：

<table> 
    <tr> 
    <td> <div id="content1"></div> </td> 
    <td> <div id="content2"></div> </td> 
    </tr> 
    <tr> 
    <td> <div id="content3"></div> </td> 
    <td> <div id="content4"></div> </td> 
    </tr> 
    <tr> 
    <td> <div id="content5"></div> </td> 
    <td> <div id="content6"></div> </td> 
    </tr> 
</table>

來源

2016-07-04 Greg Peckory

如果更改'表，TD，tr'的標籤'div'是的，你可以把它響應。如果沒有，你的佈局如果是固定的（'table'） –

使用媒體查詢併爲不同的設備/分辨率添加css –

@MarcosPérezGude你的意思是創建div併爲每個設置屏幕寬度和高度百分比？ –

是的，可以以動態方式查看錶格，即此技巧被稱爲響應式用戶界面，您可以指定每個td元素的寬度，但我不會推薦它。

我建議你停止使用表格，表格很難維護，而是使用div，span，ul，li和css magic來創建表格結構並使用bootstrap來響應UI。

你可以閱讀更多關於此這裏：http://getbootstrap.com/getting-started/

希望這有助於。 :)

來源

2016-07-04 09:38:26

<table> 
<tr> 
<td>Lorem ipsum</td> 
<td>Lorem ipsum</td> 
<td>Lorem ipsum</td> 
</tr> 
<tr> 
<td>Lorem ipsum</td> 
<td>Lorem ipsum</td> 
<td>Lorem ipsum</td> 
</tr>

table { 
display:flex; 
flex-wrap:wrap; 
width:90%; 
margin:0 auto; 
} 

tr { 
flex:1 0 300px; 
display:inline; 
} 

td { 
display:inline-block; 
width:100px; 
height:100px; 
}

https://jsfiddle.net/cmckay/02tvkyj8/

http://autoprefixer.github.io/

來源

2016-07-04 10:22:32

更改HTML表結構

回答

相關問題