Log in / Register

Forum › Bugs

table layout significantly depends on border attribute

RBK
I was trying to produce timelines using HTML tables. While they work fine in current versions of Firefox, Chrome, and (with minor adjustments) in Opera, I'm still unable to produce decent layout using Prince. Here is a reduced example showing the essence of the problem:
<html>
  <head>
  </head>
  <body>

    <p>First, with border="1":</p>
    <table style="width:100%; text-align:center; border-collapse:collapse; white-space:nowrap; margin:0; padding:0;" border="1">
      <tr>
        <td colspan="2" style="background:#ffb0a0; width:5%;">foo</td>
        <td colspan="3" style="background:#a0c0ff; width:5%;">bar</td>
        <td colspan="3" style="background:#c0efa0; width:80%;">long, long time</td>
        <td colspan="3" style="background:#e0d0ef; width:5%;">baz</td>
        <td colspan="2" style="background:#efc0a0; width:5%;">zap</td>
      </tr>
      <tr>
        <td> </td>
        <td colspan="2" style="width:1%;">1900</td>
        <td> </td>
        <td colspan="2" style="width:1%;">1907</td>
        <td> </td>
        <td colspan="2" style="width:1%;">2006</td>
        <td> </td>
        <td colspan="2" style="width:1%;">2012</td>
        <td> </td>
      </tr>
    </table>
    <p>As a timeline, this doesn't look very professional, mostly due to the borders around the years. Also, for some reason, the "bar"/"baz" cells are larger th
an the "foo"/"zap" cells.<p>

    <p>However, without border attribute, the position of text changes radically:</p>
    <table style="width:100%; text-align:center; border-collapse:collapse; white-space:nowrap; margin:0; padding:0;">
      <tr>
        <td colspan="2" style="background:#ffb0a0; width:5%;">foo</td>
        <td colspan="3" style="background:#a0c0ff; width:5%;">bar</td>
        <td colspan="3" style="background:#c0efa0; width:80%;">long, long time</td>
        <td colspan="3" style="background:#e0d0ef; width:5%;">baz</td>
        <td colspan="2" style="background:#efc0a0; width:5%;">zap</td>
      </tr>
      <tr>
        <td> </td>
        <td colspan="2" style="width:1%;">1900</td>
        <td> </td>
        <td colspan="2" style="width:1%;">1907</td>
        <td> </td>
        <td colspan="2" style="width:1%;">2006</td>
        <td> </td>
        <td colspan="2" style="width:1%;">2012</td>
        <td> </td>
      </tr>
    </table>
    <p>Notice that the positions of years 1907 and 2006 have moved inwards. And also notice that the padding in the year cells seems to have become smaller.</p>
    <p>Why is that so?</p>
  </body>
</html>
The style="width:1%" trick is supposed to ensure minimal horizontal extension of the year cells.
  1. prince-table-layout.png‎ 39.7 kB ‎
    Prince 8.1r3 rendering of the HTML file above.
jim_albright
One trick you might try is making the border white.

Jim Albright
Wycliffe Bible Translators

RBK
jim_albright wrote:
One trick you might try is making the border white.


I tried this, but it doesn't seem to be possible...
mikeday
Looks like something to do with the spacer cells being empty. Add a no-break space (&#xA0) to each empty table cell and it looks much better.
RBK
mikeday wrote:
Add a no-break space (&#xA0) to each empty table cell and it looks much better.


This workaround lets me do what I wanted to do. Thanks, Mike!
RBK
It seems like I rejoiced too early. See the snapshot.
  1. padding.png‎ 22.0 kB
mikeday
Hmm, not sure what's happening here, we shall have to investigate further. In the meantime, would it be possible to use a different approach, such as absolute positioning?
RBK
mikeday wrote:
In the meantime, would it be possible to use a different approach, such as absolute positioning?


Thanks for pointing out this option. Absolute positioning also has some other advantages, for what I'm having in mind.