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!

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

4 Likes

Thank you for explaining it @UMNiK :grin:

1 Like

NOTICE : UPDATE 210817 [Complete New Version]

/*********** 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;
	}
3 Likes

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

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

7 Likes

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

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

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

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

2 Likes

I need column tabe,how can i change it?

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

1 Like

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

Thanks you very much

1 Like