Control min width and max width of a particular column of a table in obsidian

[girishkdesh]

What I’m trying to do

I am actually trying to create a table with two columns. I want the first column to have minimum width of its contents but maximum width of 30% of the table width. The second column should be with the minimum width of the contents and max width with the remaining 70% of the table width. I hoped I could use this kind of table to create a Cornell note in obsidian. I know there are paid and free templates to achieve that. But both of them are complicated enough to break the flow of the thinking. I want a template as simple as using a table for the purpose. I want to limit the maximum width of the both the columns.

Things I have tried

Actually I couldn’t yet figure out how to specifically target the nth column of the obsidian table. Please help. Thanks in advance.

[blue_emperor]

This is from Pandoc’s pipe_tables extension:

If any line of the Markdown source is longer than the column width (see --columns), then the table will take up the full text width and the cell contents will wrap, with the relative cell widths determined by the number of dashes in the line separating the table header from the table body. (For example ---|- would make the first column 3/4 and the second column 1/4 of the full text width.) On the other hand, if no lines are wider than column width, then cell contents will not be wrapped, and the cells will be sized to their contents.

https://pandoc.org/MANUAL.html#extension-pipe_tables

You can use pandoc indirectly in Obsidian, see Enhancing Export community plugin.

[girishkdesh]

That didn’t solve the problem. The column in which I add large amout of text swells beyond what we expect by adding the dashes. markdown in Obsidian doesn’t work that way.
I have come up with some solution using the CSS.

[girishkdesh]

I could achieve the results by using the CSS.
I proceeded in the following way

1. Assign CSS class “cornell” to the file or note (in which we want the table columns should be with the width of our liking, e.g. in my case, I wanted the first column should occupy max width of 30% of the table and the second one with the remaining 70 of the total table width). YOU CAN DO THAT USING THE FILE PROPERTIES IN OBSIDIAN.
2. Create a CSS snippet in the .Obsidian>snippets folder in your vault
3. In that CSS file enter the following code

.cornell table {
	width: 100%;
}


.cornell table td:nth-child(1) {
	max-width: 30vw !important;
	min-width: 10vw !important;
}


.cornell table td:nth-child(2) {
	max-width: 70vw !important;
	min-width: 30vw !important;
}

4. Activate the snippet in Obsidian by going to settings>>appearance>>bottom of all the options, there you find the CSS snippets. Toggle ON the newly created snippet from the list (it appears there automatically and most of the times it is automatically toggled on as well, but, for a reason, it is not toggled on, do it manually).

Because we have added .cornell before each of the selectors above in the CSS, our CSS applies only to the notes with the CSS class .cornell.

All other notes remain unaffected.

I have created a template for such a note with the CSS class .cornell and the general note structure for the Cornell Notes.
Here is an example of such a note (with dummy text) in the following screenshot

I am herewith sharing gladly the Obsidian template file and the CSS snippet file. Just put them in place and you are ready to go using the template.
Or you can modify it further to your taste.

NOTE THAT I USE THE TEMPLATER PLUGIN AND THE TEMPLATE I AM SHARING INCLUDES SOME CODE THAT RUNS ONLY IF THE TEMPLATER PLUGIN IS INSTALLED ON YOUR OBSIDIAN VAULT

Find the files in the attachments.
cornell.css (238 Bytes)
template-cornell.md (414 Bytes)

ALL THE BEST.
HAPPY NOTE TAKING.