将嵌套表格定位到单元格右侧

Question

展示我想要实现的最佳方式是通过图片： 我尝试将嵌套表格定位在行的两侧，但是没有找到有趣的解决方案。当我使用“position: absolute;”时，结果并不理想。是否可能像图片中那样实现？

编辑：这不是我的项目，我对设计没有任何影响。它基于表格，我必须处理它 :)

- TrN

Answer 1

你可以让它浮动...或者你可能只需要将包含它的单元格设置为text-align:right，具体取决于单元格中是否还有其他内容，是否只需要将嵌套表格放在右边...（这在某些浏览器中不起作用）

<table width="100%" border="1">
<tr>
<td>
    <table style="background: red;">
      <tr>
          <td>left</td>
       </tr>
    </table>
</td>
<td>
    <table style="background: green; float: right">
       <tr>
          <td>right</td>
       </tr>
    </table>
</td>
</tr>
</table>

- clairesuzy

---

我已经等了几个小时，但如果那个给我点踩或同情点踩的人想告诉我这个有什么问题或者和后来一个没有被点踩的回答有什么不同，我会很乐意删除或修改，总之这并没有帮助到提问者吧？ - clairesuzy

Answer 2

如果您能够使用div代替表格标签来包含这两个元素，那么可以使用左右两个div代替您的两个TD标签，代码如下：

<div class="left"><table></table></div>
<div class="right"><table></table></div>

然后只需添加一些CSS

<style type="text/css">
  .left, .right {
    width:300px;        
  }
  .left {
    float:left;
  }
  .left table, .right table {
     width:63%;
  }
  .right table {
    float:right;
  }
</style>

我会选择使用该路线而不是使用表格。如果它不起作用，您可能需要将td标记的显示类型更改为块。话虽如此，我以前没有尝试过这样做，也不确定它是否有效。

- agmcleod

---

嗯...我认为我可以做类似这样的事情：<td> <div class="left"> <table id="nestedTableRight">...</table> </div> </td> <td> <div class="right"> <table id="nestedTableRight"> ... </table> </div> </td> 对吧？ - TrN

我建议避免使用表格来包装div。表格默认情况下使对齐变得棘手。你用表格标签做什么？ - agmcleod

Answer 3

如果您在包含的<td>中没有更多内容，可以将其向右浮动；

/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
    float: right;
}

jsfiddle演示

- xec

Answer 4

请记住以下内容：

1. 绝对定位和浮动元素会导致 大崩溃。因此，单元格对您来说可能变得不可预测。
2. 嵌套表这些天不常见。也许您的设计是错误的。您考虑过其他设计吗？也许是在表格单元格内使用 div 元素，在列表项内嵌套表格？
3. 表是本质上的块级元素。也就是说，表格默认会尝试填充其父元素的宽度。因此，为了获得您的结果，您需要为它们指定宽度。

我的建议是远离表格。使用 CSS 定位。

- Saeed Neamati

---

回复：#1 - 表格单元格会建立一个新的块级格式化上下文，因此不会发生折叠 - 表格单元格将包含浮动元素 - 回复：#3 这是不正确的，如果您不给表格设置宽度，它将缩小以适应内容。它是一个表格元素，实际上更像是 inline-block 的性质。 - clairesuzy

如果这是我的项目，我永远不会使用表格布局...但这是“老派程序员”的Web应用程序，我对此没有任何影响...;x 嗯，我现在无法检查所有答案，但我明天会尝试并告诉你结果。 :) - TrN