javascript - Chrome 和 IE 上的 html 表格并排问题

Question

你好，我要 html 表格，应用于它们的 css 如下:

<table style="float:left;width:30%;">
    <tr>
        <td>Row1Cell1</td>
        <td>Row1Cell2</td>
    </tr>
</table>
<table style="width:70%;">
    <tr>
        <td>Row2Cell1</td>
        <td>Row2Cell2</td>
    </tr>
</table>

在 Firefox 中，当我将页面缩小到最大尺寸时，表格始终并排放置，但在 Chrome 和 IE9 中，当尺寸缩小到最大尺寸时，它们一个下面对齐。那么请问我该如何解决这个问题？

Answer 1

发生这种情况的原因是因为第一个表格的调整大小不能超过每个单元格占用的最小宽度，因为单元格的内容不会换行，除非有空格可以换行。

我已经尝试了此处发布的所有“解决方案”，Anthed 所建议的总体思路似乎是真正可以完美运行的唯一方法。

这是我的代码，基于 Anthed 发布的内容，但有一些非常重要的修改:

<table style="width:100%">
  <tr>
    <td style="width:30%">

      <table style="width:100%">
        <tr>
          <td>Row1Cell1</td>
          <td>Row1Cell2</td>
        </tr>
      </table>

    </td>
    <td style="width:70%">

      <table style="width:100%">
        <tr>
          <td>Row2Cell1</td>
          <td>Row2Cell2</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

See live demo .

主要区别:

1. 我已经更改了对非常旧的、已弃用的 ( see bottom of this section on MDN ) width 属性的使用，并将其更改为使用 style 改为属性。
2. 我也为嵌套表格添加了宽度样式，否则它们不会占据整个宽度

其他答案不起作用的原因是，根据内容的文本内容，当表格缩小到比其内容所允许的宽度更小时，表格总是会尝试占用更多空间。