Modern Table Row with Scrollbar

CSS Code Click Here
/********************* Table90 *********************/
	[data-rem-container-tags~="table90"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table90"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table90"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 90px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}


	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table90"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table120 *********************/
	[data-rem-container-tags~="table120"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table120"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table120"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 120px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table120"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table150 *********************/
	[data-rem-container-tags~="table150"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table150"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table150"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 150px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}


	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table150"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table180 *********************/
	[data-rem-container-tags~="table180"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table180"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table180"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 180px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table180"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table210 *********************/
	[data-rem-container-tags~="table210"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table210"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table210"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table210"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 210px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table210"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table210"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table210"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table240 *********************/
	[data-rem-container-tags~="table240"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table240"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table240"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table240"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 240px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table240"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table240"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table240"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table270 *********************/
	[data-rem-container-tags~="table270"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table270"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table270"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table270"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 270px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table270"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table270"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table270"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table300 *********************/
	[data-rem-container-tags~="table300"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table300"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table300"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table300"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 300px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table300"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table300"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table300"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/********************* Table330 *********************/
	[data-rem-container-tags~="table330"] {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1rem;
		background-color: #F7F6F3;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: auto;	
		white-space: pre;
	}

	[data-rem-container-tags~="table330"] 
	> .TreeNode {
		display: grid;
		grid-auto-rows: auto;
		border-left: unset !important;	
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Title ***********/
	[data-rem-container-tags~="table330"] 
	> :first-child {
		border: 0.1em solid #EEEEEB;
		background-color: #EEEEEB;
		background-size: 100% 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	/*********** Table left Property Column ***********/
	[data-rem-container-tags~="table330"]
	> .TreeNode
	> .tree-node-container
	> :first-child {
	    float: left;
	    width: 330px !important;
	    font-weight: bold;
	  	background-color: #F7F6F3;
		text-align: left;
		padding-left: 0em;
		position: relative;
		z-index: 1;
	}

	/*********** Table all the horizontal line ***********/
	[data-rem-container-tags~="table330"]
	> .TreeNode
	> .tree-node-container:not(:first-child) {
		border-top-width: 0em;
		border: 0.01rem solid #F7F6F3;
	}

	/*********** Table Content Cell Configuration ***********/
	[data-rem-container-tags~="table330"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode {
		display: flex;
		flex-direction: rows;
		text-align: left;
		overflow: auto;	
		white-space: pre;
	}

	/*********** Table Content Cell ***********/
	[data-rem-container-tags~="table330"]
	> .TreeNode
	> .tree-node-container
	> .TreeNode
	> .tree-node-container {
		color: ;
		background-color: #FFFFFF;
		border-left: 0.05em solid #EEEEEB;
		flex: 1 1 0;
		overflow: auto;
		white-space:pre;
	}

/*********** Table Column Color Preset ***********/
	[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 Row LineBreaker ***********/
	[data-rem-tags*="lb"] .hierarchy-editor__tag-bar__tag {
		color: transparent;
		background-color: transparent;
	}

	[data-rem-tags*="lb"] {
		padding-left: 23px !important;
	}

	[data-rem-tags*="lb"] {
		height: 5px;
	}

	[data-rem-container-tags~="lb"] 
	> .TreeNode {
		border-left: unset !important;
	}

/*********** Adjustment of Table Content Cell Width ***********/
	[data-rem-container-tags~="w30"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 30px;
	}
	[data-rem-container-tags~="w60"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 60px;
	}
	[data-rem-container-tags~="w90"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 90px;
	}
	[data-rem-container-tags~="w120"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 120px;
	}
	[data-rem-container-tags~="w150"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 150px;
	}
	[data-rem-container-tags~="w180"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 180px;
	}
	[data-rem-container-tags~="w210"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 210px;
	}
	[data-rem-container-tags~="w240"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 240px;
	}
	[data-rem-container-tags~="w270"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 270px;
	}
	[data-rem-container-tags~="w300"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 300px;
	}
	[data-rem-container-tags~="w330"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 330px;
	}
	[data-rem-container-tags~="w360"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 360px;
	}
	[data-rem-container-tags~="w390"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 390px;
	}
	[data-rem-container-tags~="w420"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 420px;
	}
	[data-rem-container-tags~="w450"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 450px;
	}
	[data-rem-container-tags~="w480"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 480px;
	}
	[data-rem-container-tags~="w510"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 510px;
	}
	[data-rem-container-tags~="w540"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 540px;
	}
	[data-rem-container-tags~="w570"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 570px;
	}
	[data-rem-container-tags~="w600"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 600px;
	}
	[data-rem-container-tags~="w900"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 900px;
	}
	[data-rem-container-tags~="w1200"]
	> .TreeNode
	> .tree-node-container 
	> .TreeNode
	> .tree-node-container {
		width: 1200px;
	}
Let's Adjust Column Width

Let’s Adjust Column Width

Available Width list

  • w30 → 30px
  • w60 → 60px
  • w90 → 90px
  • w120 → 120px
    .
    .
    .
  • w420 → 420px
  • w600 → 600px
  • w900 → 900px
  • w1200 → 1200px
Let's Make Column Color

Let’s Make Column Color

Let's Make Table Row Line Breaker

Let’s Make Table Row Line Breaker


Current Limitation
At the moment, it is not possible to adjust the width of individual columns.

7 Likes

seems very promising :wink:

2 Likes

Amazing man… :heart_eyes: - I am waiting for it

1 Like

The second version of Modern Table Row arrived! :smiley:
It is fully compatible with Version 1
If you were using older version, overwriting is the best option
Hope this snip could be helpful to your Productivity!

2 Likes

CSS Table became completely useless because Newer RemNote deviated from rem-container which makes remnote performance slow.

so Please beware of using CSS Table. unless you are stick to Grandfathered version. This is a legacy code. :wink:

2 Likes