Modern Column Table

[Browneyedsoul]

CSS Code here

[data-rem-container-tags~="table"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

[data-rem-container-tags~="table"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table"] 
    > :first-child {
	border: 0.1em solid black;
	margin-left: 1.55em;	/*If your table title bar is not clean , adjust here*/
	background-color: #EEEEEB;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container {
	border-bottom: 0.1em solid black;
	border-left: 0.1em solid black;
	border-right: 0.1em solid black;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container:nth-child(n+2) {
	margin-left: -1px;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container 
	> div:first-child {
	border-bottom: 0.1em solid black;
	font-weight: bold;
	background-color: #EEEEEB;
	text-align: center;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode {
    display: flex;
}

.tree-node-container[data-rem-container-tags~="table"]
    > .TreeNode
    > .tree-node-container {
    flex: 1 1 0; /* change table width here */
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode:not(:hover) .rem-bullet__container {
	visibility: hidden ;
} 

A slight variation of @hannesfrank’s CSS library

[Eiko]

Thank you for your work

[Adam_Mark]

That looks great, how to use it? When I copy paste the code into CSS and hashtag table nothing happens. What am I doing wrong please?

[Browneyedsoul]

As you can see from the upper gif image,

You first make rem hierarchy to make table.
Did you make the hierarchy first?

then the top parent hierarchy rem behaves like the title of table. but not the table content itself.

[Adam_Mark]

I didn’t - so the table needs to be in hierarchy, then it works with CSS. I see, thank you!

[victorianati]

Hi, thanks for this neat table!
I’m still new to working with CSS and can’t seem to get the tag to work.

I added the code but when I try to tag the parent with “table”, the CSS tag comes up nameless? and when I add that nameless tag, it just pastes the entire code into the tag section.

Did I add the code incorrectly?

[Browneyedsoul]

Hi, @victorianati

The CSS code I uploaded only works with the Tag named Table or table

You may be misunderstood because of the image I uploaded.

in the image,
↓ this word is not aimed at the tag. just description.

Simple Table

Anyway You have to make Tag named Table by [Create Rem: table]

another way, make new Rem named Table
→ slash command Copy Rem as Tag
→ Paste to your table title

[victorianati]

Aahh, I see!
Thanks so much for explaining everything!!

[Browneyedsoul]

Latest version available!

browneyedsoul/RemNote-CSS-Library/blob/main/Modern Table Column.css

[YOUNG_LEE]

Thanks for sharing it

[M_Young]

This works great for me. Thanks so much.

I could imagine making a template out of it for something like a weekly schedule – days as the headers of the table and a list of things to do, etc.

Fun to explore.

I made a monthly schedule:

RemNote – The all-in-one tool for thinking and learning.

(If you click the link you can see the Rem I shared…)

Here’s my CSS. I lightened the border colors and removed the background color of the “week” headers

[data-rem-container-tags~="table"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border: 0px solid red;
	margin-left: 1em; margin-right: 3em;
}

[data-rem-container-tags~="table"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table"] 
    > :first-child { /* header of the table group */
	border: 0em solid red;
	margin-left: 0em;	/*If your table title bar is not clean , adjust here*/
	background-color: #EEEEEB; 
		background-color: white;
		font-weight: bold;
 
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container {
	border: 0.1em solid #ddd;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container:nth-child(n+2) {
	margin-left: -1px;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode 
	> .tree-node-container 
	> div:first-child {
	border-bottom: 0.1em solid #ddd;
	font-weight: bold;
	background-color: #eeff99;
	text-align: center;
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode {
    display: flex;
}

.tree-node-container[data-rem-container-tags~="table"]
    > .TreeNode
    > .tree-node-container {
    flex: 1 1 0; /* change table width here */
}

.tree-node-container[data-rem-container-tags~="table"] 
	> .TreeNode:not(:hover) .rem-bullet__container {
	visibility: hidden ;
} 
A slight variation of @hannesfrank’s CSS library

It would be neat to make a collected “monthly” view of daily documents’ contents. I tried making the days links to Daily Documents, but iI couldn’t get it to work.

It does show the contents of the Daily Document when I hover over:

I like how I can drag Rems from one day, to another one. So if I don’t do a task that day, I could drag it to another day.

I think the CSS could be improved by hiding the vertical lines. I can’t remember how to do that.

[shubham_swaraj]

can please anyone tell me how to adjust the size of column so that everything fits

[Browneyedsoul]

Hi, @shubham_swaraj Currently, there’s no way to adjust all the lines at the same level. sorry about this. someday I’ll update with js extension to make it possible so, until then, if you want the feature, please use “Modern Table Row” instead.