Version 2 tables CSS is weird

Feedback
1

I gave version 2 of tables a look to see if that was something I wanted to change my tables into.
However, the CSS for these tables is implemented rather… well… weird??
I noticed this, because due to my theme they look like this:

Schermafbeelding 2023-05-28 140746
Schermafbeelding 2023-05-28 1407461326×438 33.2 KB

There’s a weird red bar at the bottom… well turns out that’s a scrollbar.

Here’s what it looks like in default dark theme, and what the CSS looks like.

Untitled
Untitled1920×1080 123 KB

That’s just… really weird. I don’t understand why it was chosen to be that way, but I don’t feel this is very usable for me at the moment.

2

there is a bug with setting the width.

1 Like
3

some suggestions to improve shui tables (v3 ?) :

  • add resizers / handles when hovering over cell borders to let us manually adjust the columns width
  • improve (or enable options) to auto size the columns’ width to fit content
  • add overflows/text wrap/ellipsis options for long content
  • add options for max-height of cell and add scrollbars per cell if needed (when text overflow the height)
  • add more options to prop logseq.table.borders to enable rows, columns, all, none rather than just true/false
2 Likes
4

Seems it also affects the default width then.
As I didn’t use that property.

5

Hey @Siferiax! Thanks for trying out the new v2 of tables. I’m not sure what is bothering you about the CSS, but one of the things the table supports is overflowing tables/long content. The positioning CSS around it allows for the table to be horizontally scrollable when the content is longer than the page width, and have the edges of the table line up with the edges of the current document.

It should do some checking to render inline tables inline, and overflow tables in an overflow manner, but that doesn’t seem to always work, and it tends to render most tables in the overflow manner. That will be fixed soon!

If there’s something else bothering you about the CSS, please let me know :slight_smile:

3 Likes
6

I see! Yes that was basically the issue I ran into. Otherwise I really like them.
A little thing I’m wondering about is the alternative lines coloring and how to change those colors using custom css, but I’ll probably figure that out when I dive more into it.

1 Like
7

I changed my css for ignore overflow feature:

div:has(> [data-testid=v2-table-container]) {
  overflow-x: hidden !important;
}

But I’d like to add a mark (css class) for applying this style…