Modern Column Table

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

10 Likes

Thank you for your work :grinning_face_with_smiling_eyes:

2 Likes

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?

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.

1 Like

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

1 Like

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?


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]
100742b81a97fc6ab02dff13fbc9138027ac73f2_2_690x295

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

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

1 Like

Latest version available!

1 Like

Thanks for sharing it :grinning:

2 Likes

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:

(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.

4 Likes

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

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.

2 Likes