Table width CSS snipptes

Custom CSS & Theme Design
1

What I’m trying to do

After upgrading to Obsidian 1.5.8, the CSS snippet for adjusting table width is not working. Interestingly, tables created with dataview have no issue, but the ones made directly with markdown cannot be controlled.

Below is the CSS I’m using, is there a solution?"

Things I have tried

.max-width table {
  max-width: 100% !important;
  width: 100% !important;
}
2

I do know that tables in Obsidian are wrapped inside a div, both in edit & preview mode, so maybe try using the below code instead that enlarges the container div:

.max-width div:has(table) {
  max-width: 100% !important;
  width: 100% !important;
}

Worked perfectly on my end.

3

Thank you for reply.

I updated my css with yours and apply to frontmeta as follows.
But it doesn’t work for me.

cssclasses:

  • max-width
4

Where do you get the ‘max-width’ class? What snippet is this from?

5

I just added custom css snippets as follows

.max-width table {
max-width: 100% !important;
width: 100% !important;
}

and define define css classes in the frontmatter

cssclasses:

  • max-width

I am not sure this is proper way, but I just used it since it works well before 1.58 update

6

I found one more clue.
When I set table layout to fixed the following css snippet works well. However the obsidian change table width automatically when I change it to auto…

.max-width table {
table-layout: fixed !important;
max-width: 100% !important;
width: 100% !important;
}

1 Like
7

One more update

The rendred view works well.
Only live preview matters.

8

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.