I Am Annoyed At Uneven Auto Width Columns
After learning how to read obsidian CSS I have finally found a way to evenly distribute table columns. Here is a simple way to evenly distribute columns without much hassle. I always use these snippets when I tables that are supposed to be rendered even are rendered unevenly.
- Works with Normal Tables
- Works with Dataview Tables
Examples
Auto Width Columns Without And With Custom-Class Applied
Without Snippet
With Snippet
Auto Width Columns Without And With Custom-Class Applied
Without Snippet
With Snippet
Snippets
/* Makes all normal tables and dataview tables in the vault the same size in preview */
.markdown-rendered table {
width: 100% !important;
}
.markdown-rendered td,
.markdown-rendered th {
width: 50% !important;
}
.markdown-rendered td,
.markdown-rendered th {
width: 33.33% !important;
}
.markdown-rendered td,
.markdown-rendered th {
width: 25% !important;
}
.markdown-rendered td,
.markdown-rendered th {
width: 20% !important;
}
.markdown-rendered td,
.markdown-rendered th {
width: 16.67% !important;
}
tables.css to make selected pages tables and dataviews in the vault evenly distributed using the cssclasses property. Use this if you want to select pages with table that you want to be evenly distributed.
/* Makes all selected normal tables and dataview tables in the vault the same size in preview */
.markdown-rendered table {
width: 100% !important;
}
.even-table-col-2.markdown-rendered td,
.even-table-col-2.markdown-rendered th {
width: 50% !important;
}
.even-table-col-3.markdown-rendered td,
.even-table-col-3.markdown-rendered th {
width: 33.33% !important;
}
.even-table-col-4.markdown-rendered td,
.even-table-col-4.markdown-rendered th {
width: 25% !important;
}
.even-table-col-5.markdown-rendered td,
.even-table-col-5.markdown-rendered th {
width: 20% !important;
}
.even-table-col-6.markdown-rendered td,
.even-table-col-6.markdown-rendered th {
width: 16.67% !important;
}
If You Don’t Know How To Use cssclasses Visit
What It Doesn’t Do
This snippet does not specify which table needs to be rendered evenly. Therefore, it applies to all the tables in a page that has equal or greater the number of columns rendered.