html - 堆叠 元素不起作用

Question

这看起来应该非常简单，并且在本地 HTML 示例中一切都按预期工作，但我的代码出现问题，我无法弄清楚它是什么。

在以下开发 URL ( 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 并弄清楚是什么阻碍了这段代码的工作吗？经过几个小时的挫败之后，我在打字时将头撞在 table 上。

谢谢，~弥敦道

Answer 1

我认为您应该使用 div 来布置它而不是表格。在此处查看显示选项:

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

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