Why top margin for tables? about simple.css HOT 7 CLOSED

To give the tables some breathing room. You can override it with custom CSS.

from simple.css.

Ok, but when I combine it with a p there is much breathing room. I thought, it would be better, if the user would self decide if there is breathing room or not.

from simple.css.

@kevquirk

I see what's going on. When putting a p above a table, there is no big gap, as in my first screenshot. But when putting the table in a figure, there will be a big gap between the paragraph and the table. Example:

<p>A paragraph</p>
<figure> <!-- Produces big space between paragraph and table -->
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </tbody>
  </table>
</figure>

Without the figure, everything is ok with the table and the paragraph.

from simple.css.

This is a weird one. Top margin on a table is cancelled out when under a paragraph, but when the table is wrapped in a figure and is wider than the container we get both margins.

We can fix this by setting margin: 0 on the figure > table selector, but I will need to test this further.

from simple.css.

Hi @lkhrs,

We can fix this by setting margin: 0 on the figure > table selector, but I will need to test this further.

I tested it and it works for paragraphs, but when writing text without a paragraph above the figure, the text has no spacing to the figure. Maybe you find a solution for it.

Thanks!

from simple.css.

The solution is to use a paragraph. We cannot support writing text without the appropriate elements.

from simple.css.

Ok understand, thanks for the fix 🙂

from simple.css.