Modern Table Row with Scrollbar

Browneyedsoul · August 21, 2021, 2:04pm

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.

_yb · August 17, 2021, 3:45pm

seems very promising

TaQuangKhoi · August 18, 2021, 1:43am

Amazing man… - I am waiting for it

Browneyedsoul · August 22, 2021, 6:39am

The second version of Modern Table Row arrived!
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!

Nicolas_Navarro_Fern · February 1, 2023, 3:49pm

Thank you for your work. But can you able make the table apear when you do you flashcards?, I think that will go to the next level.

alphayash · February 10, 2023, 5:35pm

Seems promising to be honest…..…!