Hello, I'm new to Joplin. I'm trying to switch from Google Docs for general notetaking, in which I utilize tables. I'm currently using Joplin 2.7.15 for macOS. I don't have markdown experience and only use the notetaking editor. I really want to keep my table in the default format in which it was created (see the first screenshot below), but whenever I exit the app or switch to other notebooks, it compresses the entire table (as per the latter screenshot below). This is particularly annoying since I take many breaks and switch notebooks often and won't complete my notes until a later time. Any insight would be greatly appreciated. I'm sorry if this has already been addressed or if it's a n00b question.
Joplin still has store all of its data as markdown in the database even if you use the richtext editor. It follows commonmark and github flavored markdown (which has the tables extension) - GitHub Flavored Markdown Spec
The richtext editor (TinyMCE) offers a bunch of table formatting features but they are simply incompatible with markdown as it lacks the features in the spec to control things like width, colours etc. Even the single header row you have cannot work as the spec requires that:
The header row must match the delimiter row in the number of cells. If not, a table will not be recognized
The remainder of the table’s rows may vary in the number of cells. If there are a number of cells fewer than the number of cells in the header row, empty cells are inserted. If there are greater, the excess is ignored
One issue that may be possible to address is the extra header line that is created for some reason where it doesn't take the first row of the table as the table's header row (although there are also arguments to say it should stay as not all tables necessarily want data in the header row).
Normally when markdown is turned into HTML for rendering the table shrinks to fit the content inside it but Joplin lets you customise the css for the entire application and the markdown editor in userchrome.css and userstyle.css respectively!
In this case, adding the following to your userstyle.css will select the tables and make them take up 100% of the width of the renderer:
.mce-item-table {
width: 100%;
}
You can find the userchrome/userstyle files by clicking Help > Open Profile Directory* in Joplin, they're just text files you can open in any text editor to change. You'll need to quit out and restart Joplin for the changes to take effect though.
Hope that answers everything!
(* I use Joplin on windows so these might be called something different for you...)
PS
If you're feeling brave, in future if you want to style an element, open the dev tools with Help > Toggle Developmennt Tools* and click the icon of a mouse in a square in the top left corner of the dev tools pane. This will let you click on anything to identify it and find out how to style it!
