Question

如果这是一个重复的问题，我很抱歉。我有一个Javascript函数，它创建一个HTML表，显示依赖于某些参数的信息。该表实际上非常大，但如果我将表格切换到相关位，我对它的问题更容易理解（并且保持完全不变）：

<table>
  <tr>
    <td style="text-align:right">Some text</td>
    <td><img src="......."></td>
  </tr><tr>
    <td colspan="2">Another table (nested)</td>
  </tr>
</table>

当表的第一行中的任何宽度的总和小于第二行中的嵌套表的宽度时，出现问题。在这种情况下，似乎“超出宽度”在第一行的两个单元之间均匀地（或按比例地）分布。然而，出于纯粹的美学原因（图像和嵌套表之间的垂直对齐），我希望将整个“多余宽度”添加到第一行的左侧单元格中。我不能给右侧单元格任何特定的宽度并使用“table-layout：fixed”（BTW似乎在我的浏览器中无法正常工作，但这是一个单独的问题），因为图像可能有所不同宽度。第一行的单元格没有任何填充，因此理论上图像单元应该在图像周围保持“紧密”（它没有），并且第一个单元格的右对齐文本应该触摸图像。 / p>

我做了很多实验，但至少在我的浏览器（Chrome）中，我只是无法防止右手细胞比图像更宽......

编辑：感谢jsfiddle的例子。但是使用这种方法，表格将占用所有可用的宽度，而我更喜欢它的宽度来调整内容....

Answer 1

以这种方式设置宽度：

<table>
  <tr>
     <td style="text-align:right;width:100%;">Some text</td>
     <td><img src="......."></td>
  </tr><tr>
    <td colspan="2">Another table (nested)</td>
  </tr>
</table>

保留第二个<td>的宽度没有值会使第一个单元格扩展到最大可能。

包含合并单元格的HTML表格中的单元格宽度

1 个答案: