这看起来应该非常简单,并且一切都在本地HTML示例中按预期工作,但有些东西弄乱了我的代码,我无法弄清楚它是什么。
在以下开发网址(http://mountdoracoffeehouse.weebly.com/test.html)中,我在页面顶部有一个简单的<table>
。这只是为了将其剥离到最基本的功能,真正的应用程序将与网站上的其他<table>
元素。该网站是使用Weebly的CMS构建的,不幸的是,它使用<table>
来创建列。当您在移动设备上查看Weebly网站时,他们会加载一个移动样式表,将<td>
元素设置为display:block
,从而导致它们堆叠。这对我不起作用。我没有使用Weebly的默认移动样式表,而是创建了自己的样式。
所以我有以下HTML结构:
<table>
<tbody>
<tr>
<td>This is td 1</td>
<td>This is td 2</td>
</tr>
</tbody>
</table>
...以及以下CSS:
<style type="text/css">
table {
width:100%;
table-layout:fixed;
}
td {
width:100%;
display:block !important;
}
</style>
任何人都可以通过Inspector搞乱DOM,并弄清楚这个代码的工作方式是什么?我在桌子上砰地一声,因为我在经过数小时的挫折之后输入了它。
谢谢, 〜森
答案 0 :(得分:1)
我认为你应该使用div来展示它而不是表格。看看这里的显示选项:
http://www.w3schools.com/cssref/pr_class_display.asp
您可以使用表格来对齐您的div,就像表格一样。