Simple 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

8 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