Tables in html are not well rendered

[EKami]

I just noticed that tables in html (and maybe other html objects?) are not well rendered. For example take this table:

<table border="1">
  <tr>
    <td></td>
    <td>Application context</td>
    <td>Activity context</td>
    <td>Service context</td>
  </tr>
  <tr>
    <td>Show an ui component</td>
    <td>NO<sup>1</sup></td>
    <td>YES</td>
    <td>NO<sup>1</sup></td>
  </tr>
</table>

Here is how it looks like with the casper theme:

And how it looks like with caffeine theme:

Any advise for a possible workaround? Creating a table in ascii with a markdown code snippet is not visually great :(

[kelyvin]

Hi @EKami,

Thanks for bringing this to my attention. I would say the best workaround would be to modify some of the SCSS stylesheets to improve the styling of the tables overall (borders, padding, backgrounds, etc).

Do you like how it looks on casper? If so, I can look into making the tables look just like them, and hopefully I can resolve your issues. Alternatively, feel free to change them yourself and send me a pull request! Otherwise, I can try getting this ready for ya over the next several weeks!

Thanks!

[EKami]

Hi @kelyvin Thanks for acknowledging the issue. Actually the tables on casper are not really great neither but it is better than what caffeine gives us.

I can try to modify the SCSS and make a PR but I do not know what "style direction" you want to take with this project (and I'm a really bad UI designer). Btw I'm not sure on what file to change exactly (could you give me more info on this?).

Btw, copy pasting the style from casper will be pretty much like using a "dirty patch" to fix the issue. I would better wait for you to fix it when you'll have time and make it pretty :)

[kelyvin]

Hey @EKami,

Thanks for your patience. I finally had a moment to take a look at this and I implemented a quick styling fix. You can find it in the latest release here: https://github.com/kelyvin/caffeine-theme/releases/tag/v2.7.7.

Please let me know if this is to your liking and let me know if there are any other enhancements/improvements you'd like me to make to it. I will close this but feel free to repoen if you'd like any adjustments. Thanks!

Example code:

<table>
<thead>
    <tr>
      <th></th>
      <th>Application context</th>
      <th>Activity context</th>
      <th>Service context</th>
    </tr>
  </thead>
<tbody>
  <tr>
    <td>Show an ui component</td>
    <td>NO<sup>1</sup></td>
    <td>YES</td>
    <td>NO<sup>1</sup></td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td></td>
    <td>Note: blah</td>
    <td></td>
    <td>Note: blah blah</td>
  </tr>
</tfoot>
</table>

Output:

[EKami]

Hello @kelyvin . This is absolutely perfect. Thanks a lot for the fix :)