Log in / Register

Forum › Bugs

table-layout:fixed, differences in Prince

mrossi
Hi,

any recent browser (Firefox, Chrome, Opera, Internet Explorer, Safari) or, in other words, 4 different html+css layout engines display the attached xhtml (see below) virtually identically. Even the behavior when resizing the window's width is the same.

Prince 8.1r3 (on Windows) converts it quite differently.

I read the CSS 2.1 specs about the fixed table-layout algorithm, so I expect the same rendering with Prince.

What happens?

Thanks
Mario Rossi



<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
><head
  ><meta charset="UTF-8"
  /><title>Layout</title
  ><style
>@page {
  size: A4;
}

@page {
  margin: 0;
}

* {
  margin: 0;
  border: 0;
  padding: 0;
}

html {
  font-family: sans-serif;
  font-size: 10pt;
}

table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
}

td {
  vertical-align: top;
  text-align: justify;
}

td.padding {
  vertical-align: top;
  text-align: justify;
  padding: 0 2mm;
}

p {
  text-align: justify;
  margin: 1em 0 0 0;
}

</style
></head
><body style="padding: 0; border: 0; margin: 0;"
><table style="width: 100mm; background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td style="background-color: aqua;"
      >50%</td
      ><td style="background-color: red;"
      >20mm</td
      ><td style="background-color: aqua;"
      >25%</td
      ><td style="background-color: yellow;"
      >25%</td
      ><td style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><table style="background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td style="background-color: aqua;"
      >50%</td
      ><td style="background-color: red;"
      >20mm</td
      ><td style="background-color: aqua;"
      >25%</td
      ><td style="background-color: yellow;"
      >25%</td
      ><td style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><table style="width:200mm; background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td style="background-color: aqua;"
      >50%</td
      ><td style="background-color: red;"
      >20mm</td
      ><td style="background-color: aqua;"
      >25%</td
      ><td style="background-color: yellow;"
      >25%</td
      ><td style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><hr style="background-color: black; size: 5px;"
/><table style="width: 100mm; background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td class="padding" style="background-color: aqua;"
      >50%</td
      ><td class="padding" style="background-color: red;"
      >20mm</td
      ><td class="padding" style="background-color: aqua;"
      >25%</td
      ><td class="padding" style="background-color: yellow;"
      >25%</td
      ><td class="padding" style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><table style="background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td class="padding" style="background-color: aqua;"
      >50%</td
      ><td class="padding" style="background-color: red;"
      >20mm</td
      ><td class="padding" style="background-color: aqua;"
      >25%</td
      ><td class="padding" style="background-color: yellow;"
      >25%</td
      ><td class="padding" style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><table style="width:200mm; background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td class="padding" style="background-color: aqua;"
      >50%</td
      ><td class="padding" style="background-color: red;"
      >20mm</td
      ><td class="padding" style="background-color: aqua;"
      >25%</td
      ><td class="padding" style="background-color: yellow;"
      >25%</td
      ><td class="padding" style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><hr style="background-color: black;"
/><table style="background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td style="background-color: aqua;"
      >50%</td
      ><td style="background-color: red;"
      >20mm</td
      ><td style="background-color: aqua;"
      >25%</td
      ><td style="background-color: yellow;"
      >25%</td
      ><td style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
><table style="background-color: lime;"
  ><colgroup
    ><col style="width: 50%;"
    /><col style="width: 20mm;"
    /><col style="width: 25%;"
    /><col style="width: 25%;"
    /><col style="width: 30mm;"
  /></colgroup
  ><tbody
    ><tr
      ><td class="padding" style="background-color: aqua;"
      >50%</td
      ><td class="padding" style="background-color: red;"
      >20mm</td
      ><td class="padding" style="background-color: aqua;"
      >25%</td
      ><td class="padding" style="background-color: yellow;"
      >25%</td
      ><td class="padding" style="background-color: aqua;"
      >30mm</td
    ></tr
  ></tbody
></table
></body
></html
>