I have a question. How can right padding of td be cal

That’s right. Actually this appears to be <a href="https://www.w3.or

Table cell padding about blitz HOT 1 CLOSED

friendsofepub commented on June 11, 2024

Table cell padding

from blitz.

Comments (1)

JayPanoz commented on June 11, 2024

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!

from blitz.

Recommend Projects

Table cell padding about blitz HOT 1 CLOSED

Comments (1)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent