Modern Table Row

Browneyedsoul · July 20, 2021, 6:38am

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

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

↓ CSS Code down below (click the “”)

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;
}

Badjer · July 10, 2021, 5:44am

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

Browneyedsoul · July 10, 2021, 7:42am

Yeah included, open the “”. and you could see css code. just Copy and paste to your custom section.

Badjer · July 10, 2021, 12:09pm

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

Jaflo · July 12, 2021, 4:08am

Your tables are on another level!

EDITH_RODRIGUEZ_PRAD · July 19, 2021, 5:24pm

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

Adam_Mark · July 20, 2021, 6:34am

How do we access the CSS code for this?

UMNiK · July 20, 2021, 10:59am

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

Browneyedsoul · July 20, 2021, 12:57pm

Thank you for explaining it @UMNiK

Browneyedsoul · August 17, 2021, 10:01am

NOTICE : UPDATE 210817 [Complete New Version]

fixed table width instability
make appearance more attractive

CleanShot 2021-08-17 at 19.00.09753×125 7.52 KB

/*********** TABLE Color Tag for Each Column ***********/
	[data-rem-tags~="tablecolor"] {
		background-color: #F7F6F3;
		font-weight: bold;
		text-align: center;
	}
	
	[data-rem-container-tags~="tablecolor"]:not([data-rem-container-tags~="show-tags"]) .hierarchy-editor__tag-bar {
	   display: none;
	}


/*********** TABLE WIDTH90 ***********/
	[data-rem-container-tags~="table90"] {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		overflow: auto;
		white-space: pre;
	}

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

	[data-rem-container-tags~="table90"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		margin-left: 1.65em;
		background-color: #EEEEEB;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		overflow: auto;
	}

	[data-rem-container-tags~="table90"] 
	> .TreeNode 
	> .tree-node-container {
		border: 0.1em solid #F7F6F3;
		background-color: #F7F6F3;
		overflow: auto;
		white-space: pre;
	}

	[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;
		border-left: 0.05em solid #EEEEEB;
		overflow: auto;
		white-space: pre;
	}

	/* 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: #F7F6F3;
		text-align: left;
		padding: 0em;
		overflow: auto;
		white-space: pre;
	}

	[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;
	}
/*********** TABLE WIDTH120 ***********/
	[data-rem-container-tags~="table120"] {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		overflow: auto;
		white-space: pre;
	}

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

	[data-rem-container-tags~="table120"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		margin-left: 1.65em;
		background-color: #EEEEEB;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		overflow: auto;
	}

	[data-rem-container-tags~="table120"] 
	> .TreeNode 
	> .tree-node-container {
		border: 0.1em solid #F7F6F3;
		background-color: #F7F6F3;
		overflow: auto;
		white-space: pre;
	}

	[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;
		border-left: 0.05em solid #EEEEEB;
		overflow: auto;
		white-space: pre;
	}

	/* 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: #F7F6F3;
		text-align: left;
		padding: 0em;
		overflow: auto;
		white-space: pre;
	}

	[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;
	}
/*********** TABLE WIDTH150 ***********/
	[data-rem-container-tags~="table150"] {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		overflow: auto;
		white-space: pre;
	}

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

	[data-rem-container-tags~="table150"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		margin-left: 1.65em;
		background-color: #EEEEEB;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		overflow: auto;
	}

	[data-rem-container-tags~="table150"] 
	> .TreeNode 
	> .tree-node-container {
		border: 0.1em solid #F7F6F3;
		background-color: #F7F6F3;
		overflow: auto;
		white-space: pre;
	}

	[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;
		border-left: 0.05em solid #EEEEEB;
		overflow: auto;
		white-space: pre;
	}

	/* 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: #F7F6F3;
		text-align: left;
		padding: 0em;
		overflow: auto;
		white-space: pre;
	}

	[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;
	}
/*********** TABLE WIDTH180 ***********/
	[data-rem-container-tags~="table180"] {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		overflow: auto;
		white-space: pre;
	}

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

	[data-rem-container-tags~="table180"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		margin-left: 1.65em;
		background-color: #EEEEEB;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		overflow: auto;
	}

	[data-rem-container-tags~="table180"] 
	> .TreeNode 
	> .tree-node-container {
		border: 0.1em solid #F7F6F3;
		background-color: #F7F6F3;
		overflow: auto;
		white-space: pre;
	}

	[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;
		border-left: 0.05em solid #EEEEEB;
		overflow: auto;
		white-space: pre;
	}

	/* 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: #F7F6F3;
		text-align: left;
		padding: 0em;
		overflow: auto;
		white-space: pre;
	}

	[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;
	}

Maria_Asuncion_Torre · September 24, 2021, 4:09pm

All my tables with this code were unconfigured, they no longer work😥 Will you update this css code to the new version of Remnote?

Browneyedsoul · September 24, 2021, 6:21pm

@Maria_Asuncion_Torre I’m sorry to hear that. because of the recent complete revampment of the rem structure, it’ll take a couple of weeks or months to build a table with CSS code. maybe it can’t be made with just CSS code. the only way I think is javascript(typescript) based Table Plugin which project has been abandoned so far. I’m also eager to make Remtable, so I’m still struggling with it.

J_Antonio_Mestas_R · October 22, 2021, 10:41pm

Como se activan las tablas?? Etiquete pero no sucedio nada

Oxirius · November 24, 2021, 11:15am

Me pasa lo mismo. Sigo los pasos y al probar no funciona. No se que es lo que hago mal

Jaflo · December 1, 2021, 1:01am

Las tablas ya no funcionan, lo escribió @Browneyedsoul arriba, la única forma que el cree en la que podrían volver es con plugins, lo siento mucho yo tambien las extraño

Browneyedsoul · December 9, 2021, 7:02am

Thanks to version 1.5 CSS Table is available again.
Here is the Latest version version

github.com

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

:root {
	--table-title-background-color: #EEEEEB;
	--table-title-background-color-dark: #000;
	--table-columnrow-background-color: #F7F6F3;
	--table-columnrow-background-color-dark: #555;
	--table-cell-background-color: #FFFFFF;
	--table-cell-background-color-dark: #2F3437;
	--table-border-color: #EEEEEB;
	--table-border-color-dark: #535353;
}
/*********** Whole Table Area ***********/
	[data-rem-container-tags~="table90"],
	[data-rem-container-tags~="table120"],
	[data-rem-container-tags~="table150"],
	[data-rem-container-tags~="table180"],
	[data-rem-container-tags~="table210"],
	[data-rem-container-tags~="table240"],
	[data-rem-container-tags~="table270"],
	[data-rem-container-tags~="table300"],
	[data-rem-container-tags~="table330"],

This file has been truncated. show original

Yongkun_Liu · December 14, 2021, 6:35am

I need column tabe,how can i change it?

Browneyedsoul · December 14, 2021, 3:13pm

@Yongkun_Liu I updated Simple Column table just now. Try this

github.com

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

:root {
	--table-title-background-color: #EEEEEB;
	--table-title-background-color-dark: #000;
	--table-header-background-color: #EAEAEA;
	--table-header-background-color-dark: #555;
	--table-cell-background-color: #FFFFFF;
	--table-cell-background-color-dark: #2F3437;
	--table-border-color: #EEEEEB;
	--table-border-color-dark: #535353;
}
/* Basic */
	[data-rem-container-tags~="table"] > .TreeNode {display: flex;}
	[data-rem-container-tags~="table"] > .TreeNode > .tree-node-container {
		flex: 1 1 0;
		overflow: auto;
		white-space: pre-wrap;
	}
	[data-rem-container-tags~="table"] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container {
		position: relative;
		left: -35px;

This file has been truncated. show original

MohamedEsmat · January 3, 2022, 10:14pm

Hi @Jaflo
I have kanban but how can i integrate it to make tables like this one please !

TitanEsXVI1 · January 5, 2022, 2:55pm

Thanks you very much