Question

我怎样才能做到这一点：

<table border="0">
  <tbody>
    <tr>
      <td style="margin-right:5px;">
        <h2 id="optiona" class="option optiona optiona2">a. aa   </h2>
      </td>
      <td style="margin-right:5px;">
        <h2 id="optionb" class="option optionb optionb2">b. a   </h2>
      </td>
    </tr>
    <tr>
      <td style="margin-left:5px;">
        <h2 id="optionc" class="option optionc optionc2">c. aa   </h2>
      </td>
      <td style="margin-left:5px;">
        <h2 id="optiond" class="option optiond optiond2">d.    </h2>
      </td>
    </tr>
  </tbody>
</table>

使用类似这样的东西（和CSS）：

<h2 style="display:inline;" id="optiona" class="option optiona optiona1">a. a   </h2>
<h2 style="display:inline;" id="optionb" class="option optionb optionb1">b. aaa   </h2>
<br />
<h2 style="display:inline;" id="optionc" class="option optionc optionc1">c. aaa   </h2>
<h2 style="display:inline;" id="optiond" class="option optiond optiond1">d. aa   </h2>

我也对 JavaScript和/或jQuery 的选项持开放态度
附：我没有对内容的控制，它们可能相当冗长（如果太长，我需要它们包装，但我认为这是自动发生的）所以没有固定的宽度。
在表中如果那个最长的单元格在一列中说200px宽，整列将是200px，我怎么会用html和css做到这一点？基本上需要h2元素排列如下：

a.aaaaa b.a
c.a     d.aaa

Answer 1

您可以使用模仿表格的display属性。但不确定它们是否适用于旧浏览器。

http://ecommercedeveloper.com/articles/1941-css-display-table-display-table-row-and-display-table-cell/

http://ajaxian.com/archives/display-table

兼容性：

http://caniuse.com/css-table

获取表格式对齐而不实际使用表格

1 个答案: