更改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表结构

回答

相关问题