Sane CSS defaults for tables

Is your feature request related to a problem? Please describe.
Recently I’ve had a workflow where I generate plain HTML tables from my markdown notes, and paste this into anki cards. I’ve noticed that the default CSS for tables in Anki do not show the table borders, which hurts readability.

I’ve currently solved this by adding custom CSS, but I thought this might be a nice thing to work into the Anki defaults. I’m happy to do it myself and submit a PR (I might need someone to show me where the default CSS rules are written in the codebase though, this would be my first time contributing).

Describe the solution you’d like
I (or someone else) update table formatting CSS defaults. If it were up to me I would suggest something like:

table {
    border-collapse: collapse;
    border: 1px solid;
    margin: 0 auto;
}
table th, table td {
    padding: 0.3em;
    border: 1px solid;
}

Current default:


With new rules:

2 Likes

I might be wrong but I don’t think Anki has custom default styling for tables or almost anything that modifies the default rules of HTML/CSS. So even if you submit a PR it would not be accepted, Anki uses HTML/CSS as they are without modification and the only way you can change it is by tweaking the note type code or by using the style attribute by wrapping things in a <span>, <div> or some other HTML tag.
Setting defaults would only complicate things for the users.

1 Like

I think you can go ahead and submit a PR. The relevant file is located at rslib/src/notetype/styling.css. In fact, many contributors have made changes to this file, and reasonable modifications are always welcome. For example, last week brishtibheja submitted a PR for this file which was merged (Commit e5d34fb).

1 Like

It was a minor change from me, and I don’t recommend it here. A better place to do this would be reviewer.scss and even though that would affect all users, it shouldn’t break anything (or would it?).

If you change styling.css changes are only made for new note types and it complicates the stylesheet users see in the template editor, which we should avoid.

Got it, my bad! You’re right, ts/reviewer/reviewer.scss is the better place. Thanks for correcting me!

sent a PR:

1 Like

Isn’t this going to have serious impacts on users who already have tables and have relied on the existing default/fallback styling attributes?

1 Like

Oh wow that was super fast thanks!

Hopefully not so – if they’ve styled the tables themselves then their own style shoult override these defaults anyways. The only people who would experience changes should be those who had completely default (so borderless and padding-less) tables, and if for some reason there are people like that, they would prefer the new style?

Not necessarily. Though it’s quite an easy fix in case they want to remove the styling from their tables.

One other group affected would be those who change some defaults but not others, for example, they have solid borders (which they explicitly state in CSS) but the borders aren’t collapsed (they don’t explicitly state this). However, not many template authors try to rely on Anki’s default stylesheet for something they consider essential for their template. The default stylesheet can change after all.

One more thing is, the changes are quite minimal so it shouldn’t render anything unusable. It’d only change the styling.

I’m certain that I have tables in my own collection with minimal additional styling, and the suggested changes would meaningfully alter them. Not every table is made better by having borders, for instance – even if that’s your personal preference. :wink:

If I’ve chosen not to “occupy the space” of that particular style property – because I don’t want to, or don’t need to-- then changing the defaults changes my cards.

Easy? You mean – once they figure out why this table changed unexpectedly, and figure out which other tables are impacted, and learn the necessary HTML/CSS to change them back? :sweat_smile: And that of course assumes they implemented the tables themselves, as opposed to getting them out of a shared deck – in which case they probably have no idea what to do to fix them.

Unless there is something incorrect about the current default/fallback styling, it seems a bit abrupt to change it for everyone based on one user’s request.

3 Likes

You’re right. Sometimes I loose perspective with these kind of things.

Besides, there are different table styles as well. E.g. if I implemented a APA table in my card, changing the default styles might also change things in that table that are undesirable – essentially breaking the APA layout.

These are all fair points. I agree, not all tables are made better with borders (e.g. ones with selective borders, or ones made to look like some cells are merged). I also understand it would be a pain for people who would have to go and re-style tables because of the change – that would not be fun at all…

But, I do still think tables with borders is a saner default compared to one with no borders anywhere. Just thinking about what would happen when dropping in an unformatted table into a card.

I agree. Maybe styling.css would be the better place as suggested by @Sunong2008.


Does Anki actually support tables though (without having to resort to manually typing html or using addons)? I don’t think it does, meaning it could be implied that – at least for now – tables and their styling are considered more advanced features which could warrant having to edit the template by yourself.

I’m thinking it would be much better to add a default styling once Anki actually has a non-power-user-friendly way to create tables.

(though I’m not necessarily against adding styling now, as long as it doesn’t break existing templates)