Modern Table Row

I made several column pixels of table.
This is also a slight variation of @hannesfrank ’s library
Hope this snip could be helpful! :grinning:

For now, you have to tag tablecolor one by one for each column.

↓ CSS Code down below (click the β€œ:arrow_forward:”)

Table Column Color Tag - for making Column background color
[data-rem-tags~="tablecolor"] {
	background-color: #EEEEEB;
}

[data-rem-container-tags~="tablecolor"]:not([data-rem-container-tags~="show-tags"]) .hierarchy-editor__tag-bar {
   display: none;
}
Table90
[data-rem-container-tags~="table90"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

[data-rem-container-tags~="table90"] 
	> .TreeNode {
	display: grid;
	grid-auto-rows: auto;
}

[data-rem-container-tags~="table90"] 
    > :first-child {
	border: 0.1em solid black;
	margin-left: 1.65em; /*change here for your custom node line space taste*/
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table90"] 
	> .TreeNode 
	> .tree-node-container {
	border: 0.1em solid black;
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
	border-top-width: 0em;
}

[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	color: ;
	background-color: #ffffff !important;
}

/* remove indentation marker */
[data-rem-container-tags~="table90"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table90"] .rem-bullet__container {
	visibility: hidden;
}

[data-rem-container-tags~="table90"]
    > .TreeNode
    > .tree-node-container
    > :first-child {
    float: left;
    width: 90px;
    font-weight: bold;
  	background-color: #EEEEEB;
	text-align: left;
	padding: 0em;
}

[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
	display: flex;
	flex-direction: rows;
	text-align: left;
}

[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	flex: 1 1 0;
}
Table120
[data-rem-container-tags~="table120"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

[data-rem-container-tags~="table120"] 
	> .TreeNode {
	display: grid;
	grid-auto-rows: auto;
}

[data-rem-container-tags~="table120"] 
    > :first-child {
	border: 0.1em solid black;
	margin-left: 1.65em; /*change here for your custom node line space taste*/
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table120"] 
	> .TreeNode 
	> .tree-node-container {
	border: 0.1em solid black;
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
	border-top-width: 0em;
}

[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	color: ;
	background-color: #ffffff !important;
}

/* remove indentation marker */
[data-rem-container-tags~="table120"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table120"] .rem-bullet__container {
	visibility: hidden;
}

[data-rem-container-tags~="table120"]
    > .TreeNode
    > .tree-node-container
    > :first-child {
    float: left;
    width: 120px;
    font-weight: bold;
  	background-color: #EEEEEB;
	text-align: left;
	padding: 0em;
}

[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
	display: flex;
	flex-direction: rows;
	text-align: left;
}

[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	flex: 1 1 0;
}
Table150
[data-rem-container-tags~="table150"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

[data-rem-container-tags~="table150"] 
	> .TreeNode {
	display: grid;
	grid-auto-rows: auto;
}

[data-rem-container-tags~="table150"] 
    > :first-child {
	border: 0.1em solid black;
	margin-left: 1.65em; /*change here for your custom node line space taste*/
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table150"] 
	> .TreeNode 
	> .tree-node-container {
	border: 0.1em solid black;
		background-color: #EEEEEB;
}

[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
	border-top-width: 0em;
}

[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	color: ;
	background-color: #ffffff !important;
}

/* remove indentation marker */
[data-rem-container-tags~="table150"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table150"] .rem-bullet__container {
	visibility: hidden;
}

[data-rem-container-tags~="table150"]
    > .TreeNode
    > .tree-node-container
    > :first-child {
    float: left;
    width: 150px;
    font-weight: bold;
  	background-color: #EEEEEB;
	text-align: left;
	padding: 0em;
}

[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
	display: flex;
	flex-direction: rows;
	text-align: left;
}

[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	flex: 1 1 0;
}
Table180
[data-rem-container-tags~="table180"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

[data-rem-container-tags~="table180"] 
	> .TreeNode {
	display: grid;
	grid-auto-rows: auto;
}

[data-rem-container-tags~="table180"] 
    > :first-child {
	border: 0.1em solid black;
	margin-left: 1.65em; /*change here for your custom node line space taste*/
	background-color: #EEEEEB;
}

[data-rem-container-tags~="table180"] 
	> .TreeNode 
	> .tree-node-container {
	border: 0.1em solid black;
		background-color: #EEEEEB;
}

[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
	border-top-width: 0em;
}

[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
	color: ;
	background-color: #ffffff !important;
}

/* remove indentation marker */
[data-rem-container-tags~="table180"] 
	> .TreeNode {
	border-left: unset !important;
}

[data-rem-container-tags~="table180"] .rem-bullet__container {
	visibility: hidden;
}

[data-rem-container-tags~="table180"]
    > .TreeNode
    > .tree-node-container
    > :first-child {
    float: left;
    width: 180px;
    font-weight: bold;
  	background-color: #EEEEEB;
	text-align: left;
	padding: 0em;
}

[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
	display: flex;
	flex-direction: rows;
	text-align: left;
}

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

8 Likes

Does this also include the table or do we need to get the table css some where else? Presumably Hannes since I don’t think that exists within RemNote ATM

Thanks for sharing
Will dive into tomorrow when it is a more reasonable time in my neck of the woods

Yeah included, open the β€œ:arrow_forward:”. and you could see css code. just Copy and paste to your custom section.

3 Likes

Thank you

I am not so literate with css so was unsure if that would also make a table for me. Nice to know it’s included

Going to check out for sure
:smiling_face_with_three_hearts:

1 Like

Your tables are on another level!

4 Likes

Could you share the CSS, please? I like it a lot.

1 Like

How do we access the CSS code for this?

1 Like

@EDITH_RODRIGUEZ_PRAD @Adam_Mark Everything is in the OP under folds for different widths, just click the triangles. There is also a separate snippet for changing column background colour.

3 Likes

Thank you for explaining it @UMNiK :grin:

1 Like