Table with collapsed border and right aligned renders borders incorrectly

[si13b]

The following table has display: inline-block and is right aligned within its parent. Its borders are collapsed. A 2px border is set on the cells.

In the example below, the borders were rendered in the middle of the cell (right through the content), instead of on the right. It's as if the renderer is drawing the borders in the table's position prior to right alignment.

<div style="text-align: right; width: 60%;">
  <table style="display: inline-block; border-collapse: collapse;" cellspacing="0">
    <tbody>
      <tr>
        <td style="width: 30px; background-color: pink; border-right: 2px solid #000">
        </td>
        <td style="width: 30px; background-color: pink; border-right: 2px solid #000">
        </td>
      </tr>
    </tbody>
  </table>
</div>

[chrisbyboston]

I am having the same issue but I am not using inline-block. The issue seems to be directly associated with border-collapse. Once border-collapse is removed, the formatting works correctly again on the right aligned text. Is this a known bug?

[chrisbyboston]

I believe that I have discovered the issue, at least for me. It looks as though this isn't a bug at all with right aligned text, but that right aligned text makes the border drawing issue clear. My table was contained inside a div that had absolute positioning offset 20 px from the the left edge of the page. The border collapse code doesn't seem to take this into consideration as it was drawing the borders with the left edge at 0 px. I am able to work around this problem by setting my div to absolute left 0 px, and then creating 20 px of padding in the div and the table draws perfectly.

[langusta]

I have the same problem. When I tell a table (with collapsed borders) to float right, the table border is drawn on the left of the page and content on the right. I would like to have two tables next to each other and don't know how to do it...