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

Question

向您展示我想要实现的目标的最佳方式是展示图片：

我试图将嵌套表放在行的每一侧。我寻找解决方案，但没有找到任何有趣的东西。 当我玩“位置：绝对;”时我做了更多的伤害而不是好的结果。是否有可能像图片中那样做？

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

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>

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标签的显示类型更改为阻止。也就是说，我之前没有尝试过，我不确定它会有多好用。

Answer 3

如果您在包含＆lt; td＆gt;中没有更多内容你可以把它浮到右边;

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

jsfiddle demo

Answer 4

记住这些注释：

1. 绝对定位和浮动儿童导致 Great Collapse 。所以，你的细胞可能会让你无法预测。
2. 这些天，嵌套表格并不常见。也许你的设计是错的。你考虑过其他设计吗？也许表格单元格中的div元素，在列表项中嵌套一个表？
3. 表格本质上是块级元素。也就是说，表默认尝试填充其父级的宽度。因此，要获得结果，您需要为它们指定宽度。

我的建议，远离桌子。使用CSS定位。