Table cell padding

Question

Table cell padding

spajak opened this issue 5 years ago · 1 comments

I have a question. How can right padding of td be calculated if there is no table width specified? The width of the table is not known before it is actually rendered.
padding: 0.75em 2% 0.6875em 0;

Answer 1 · 2019-08-03T10:25:08.000Z

That’s right.

Actually this appears to be subdocumented in the spec.

I consequently created a very quick test in order to come with an explanation:

<!DOCTYPE html>
<html>
<head>
  <title>Table Padding Test</title>
  <style>table {
    table-layout: auto;
    border: 1px solid;
    border-collapse: collapse;
  }
  td {
    border: 1px solid;
    padding: 10px 5%;
  }</style>
</head>
<body>
<table>
  <tr>
    <th>type</th>
    <th>values</th>
  </tr>
  <tr>
    <td>Font Family</td>
    <td>sans-serif | serif | monospace</td>
  </tr>
  <tr>
    <td>Font Size</td>
    <td>number in px</td>
  </tr>
  <tr>
    <td>Theme</td>
    <td>Light | Sepia | Dark</td>
  </tr>
  <tr>
    <td>Rendition</td>
    <td>reflowable | pre-paginated | paginated | scrolled-continuous | scrolled-doc | align-x-center | …</td>
  </tr>
</table>

<button type="button">Relayout</button>

<script>
  const trigger = document.querySelector("button");
  const relayoutStyle = document.createElement("style");
  relayoutStyle.id = "relayout";
  document.head.appendChild(relayoutStyle);
  const stylesheet = document.head.querySelector("#relayout");
  trigger.addEventListener("click", (e) => {
    e.preventDefault();
    stylesheet.textContent = `body {font-size: 100%;}`;
  }, false);
</script>
</body>
</html>

Turns out we never encountered the issue in testing because the Reading Systems we used are forcing a relayout e.g. applying their own styles, user settings, pagination, etc. That like even happens with a “poor-man’s pagination” stylesheet of mine.

If you’re clicking the relayout button in Webkit/Blink, the table will be laid out again but this time with the correct padding. In Firefox, it won’t – I can’t wait for the guys @ Microsoft to finish documenting all the table issues so that browsers can come up with a semblance of compat.

However this is the awful side effect of an EPUB’s idiosyncrasy, and not a voluntary trick – which would be really bad – so I’ll switch back to px. Thanks for asking!