Question

这看起来应该非常简单，并且一切都在本地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，并弄清楚这个代码的工作方式是什么？我在桌子上砰地一声，因为我在经过数小时的挫折之后输入了它。

谢谢，〜森

Answer 1

我认为你应该使用div来展示它而不是表格。看看这里的显示选项：

http://www.w3schools.com/cssref/pr_class_display.asp

您可以使用表格来对齐您的div，就像表格一样。

堆叠元素不工作

1 个答案: