Question

我有一张桌子，我试图使其表现得像Excel一样或多或少。我已经成功地将左对齐的单元格溢出到右侧的单元格中（通过将其上下文放在包含max-width，overflow:visible和white-space:nowrap的包装div中，但是没有成功右对齐的单元格向左溢出。我已经尝试将包装器div向右移动（以及其中的各种排列）但没有成功;无论如何，文本总是溢出到右边。

StackOverflow和其他地方对此问题的其他答案建议使用dir:rtl，但我真的不想这样做。我事先并不知道哪些细胞会溢出，我也不想处理它对标点符号所做的古怪事情。

如果您还可以弄清楚如何让中心对齐的单元格同等地溢出到两个邻居中，那么

奖励积分。

编辑：这是一个例子jsfiddle：http://jsfiddle.net/AlexGodofsky/2uaHN/2/

Answer 1

我在针对同一问题进行研究时找到了您的问答：在表格单元格内部对齐文本以对齐并向左溢出。

我非常同意您使用dir:rtl not ，例如：在this SO answer。除了关于标点符号的实际缺点：dir 不意味着这个问题！

在your solution中，高度问题是由内部div的绝对定位引起的：它位于流量之外，因此没有高度。

我确实得到了正确的对齐＆＃39;使用花车工作，我很高兴在这里为任何可能需要它的人分享这个最小的例子。我还有一个额外的奖金＆＃39;中心案例的解决方案。

＆＃13;

td {
  width: 8em;
  max-width: 8em;
  border: 1px solid #000;
}
div.fix_right {
  float: right;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  background-color: #ddd;
  /* and to obscure the contents of the cell on the left: */
  position: relative;
}
div.fix_center_a {
  position: relative;
  left: 50%;
  display: inline-block;
}
div.fix_center_b {
  position: relative;
  display: inline-block;
  margin-left: -50%;
  white-space: nowrap;
  /* and to obscure the contents of the cell on the left: */
  background-color: #ddd;
}

＆＃13;

<table>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_right">align right</div>
    </td>
    <td>some text here</td>
  </tr>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_right">do align and overflow right</div>
    </td>
    <td>some text here</td>
  </tr>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_center_a">
        <div class="fix_center_b">centered text, extending to the left and right</div>
      </div>
    </td>
    <td>some text here</td>
  </tr>
</table>

＆＃13;

与右侧对齐

我认为此解决方案的关键是使用float中的div和max-width中td的组合。

需要相对定位和bg颜色才能让内容模糊不清。左侧列的内容。如果这些左列无论如何都是空的，甚至不需要这样。

中心

这个解决方案（不幸的是）需要额外的一层非语义div，但它的工作原理如下：

td保持不变，以便它可以获得边框等。请注意，边框显示单元格本身没有展开，只有内容溢出它。
第一个div（fix_center_a）让我们进入单元格的中间，并获取内容所需的总宽度。
第二个div（fix_center_b）只是将内容的50％（从fix_center_a）移到左侧，从而使内容居中。

（由于第一个div的相对位置，如果您在fix_center_b上应用背景颜色，内容已经遮挡了左右单元格的内容。）

Answer 2

根据粉碎在评论中提出的建议，我找到了一种方法：

http://jsfiddle.net/AlexGodofsky/2uaHN/3/

关键是这些单元格有一个带有position:relative的外包装div以及正常的包装样式（max-width，overflow:visible和white-space:nowrap），然后是内包装div具有灵活的大小和position:absolute right:0。

我遇到的一个问题是你需要给外包装器一个固定的高度（height:100%不起作用）或者在vertical-align上使用td，否则外包装的顶部将位于单元格的中间。哪个最佳可能取决于您是否可以提前知道行高。

在WITHOUT rtl表中向左溢出文本

2 个答案:

与右侧对齐

中心