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!

5 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:

6 Likes