Increase table width

[ReaderGuy42]

Table width CSS snipptes

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.

I’ve tried this suggestion, but that doesn’t do anything for me. I’d like to increase the width of my table, beyond what’s the “readable line lngth”, which I don’t want to turn off because the regular text is fine at this width.

I’m also talking about Live Preview. I have a snippet that works to increase the width in preview mode, but for ease of data entry, I’d like it to have a greater width while still being able to type in the table.

Thanks!

[dawni]

Try this CSS:

/* enlongen all tables */

/* Live Preview not inside rendered blocks */
.markdown-source-view.mod-cm6 .cm-table-widget > .table-wrapper,
.cm-table-widget > .table-wrapper > table,

/* Reading mode not inside rendered blocks */
.el-table > table,

/* Reading mode inside callouts, Live Preview inside callouts */
.callout-content table

{
	width: 100%;
}

[ReaderGuy42]

Thanks, but this doesn’t do anything for my tables. I tried this both in my vault, and the sandbox vault, and with multiple tables.

[ariehen]

I would have a scroll back through and/or ask in Obsidian’s Discord #appearance channel.

I’ve seen a few “wider than readable line length” table snippets float by – some for regular tables, some only for dataview tables, some affecting all notes and some with a cssclass for only certain notes.

They are fairly complicated and my impression is that they are prone to breaking with Obsidian updates, may only work properly in some themes, etc.

---

One possible example here: Discord link

[ReaderGuy42]

Thanks, I’ll have a look at that. Also, break how?
Before I do anything to break something, I’ll live with viewing the table in preview mode.

[ariehen]

@ReaderGuy42

Also, break how?

In this case, the snippet creator sailKite, made sure it was working at that time in the default theme.

If there are Obsidian updates, it could break.

[ReaderGuy42]

Ah OK, thanks. Well, I think I’ll leave it at that. Thanks for the assistance

[dawni]

We still might get it working for you. When you use the snippet I wrote you, what does it look like in your sandbox, and what is missing compared to what you’re trying to achieve? Also are you in v1.8.9?

I put these tables in my sandbox:

| column 1 | column 2 | column 3 |
| -------- | -------- | -------- |
| a        | a        | a        |
| b        | b        | b        |

> [!NOTE]
> 
> | column 1 | column 2 | column 3 |
> | -------- | -------- | -------- |
> | a        | a        | a        |
> | b        | b        | b        |

And this is how it looks…

Live Preview without snippet:

Reading mode without snippet:

Live Preview with snippet:

Reading mode with snippet:

[ReaderGuy42]

Thanks for this!
I think I’m seeing the same as in your screenshots. Yes, I’m on 1.8.9, I’m using Linux Mint. The thing I’d like to achieve is that, ideally, the table would go beyond the “readable line length” if there’s space for it.

I’m learning Japanese, and I have some css to increase the font size in the table

.markdown-rendered tbody > tr > td {
   
    font-size: 40px;
}

because the characters are complicated:

but because the font is now bigger, the lines wrap, even though there’s plenty of space to the left and right of the table. In Preview Mode, I can tell it to go wider, with e.g.

    body .vocab-page { 
    --file-line-width: max-width; 

        }

but then I obviously can’t fill in the gaps.

This is obviously a somewhat silly problem to have, since I can just fill in the gaps, then switch to Preview mode, but just something I’ve been finnicking with.

In case you want to test out the table:

| Kana           | Kanji       | Readings                                             | English                 |
| -------------- | ----------- | ---------------------------------------------------- | ----------------------- |
| あおい            | 青い          | {青\|あお} い                                            | blue                    |
| あかい            | 赤い          | {赤\|あか} い                                            | red                     |
| あさごはん          | 朝ご飯         | {朝\|あさ} ご {飯\|はん}                                    | breakfast               |

Thanks

[dawni]

A straightforward but not-so-elegant way:

/* table length in Reading mode */
.is-readable-line-width.vocab-page .el-table {
	margin-left: -10em;
	margin-right: -4em;
}

It’s not responsive to different screen sizes but might satisfy that “use the space available” desire for your Japanese-learning notes. Set the two margin sizes to your liking.

[ReaderGuy42]

Thanks, that works!