BeeNag BeeNag - 4 years ago 120
Sass (Sass) Question

Adding horizontal and vertical scrolling to a table

I have a table:

<div>
<div className="shadow-z-1">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
...
</div>


And I am currently styling it using the following stylesheet:

.shadow-z-1 {
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

.table {
width: 100%;
max-width: 100%;
margin-top: 1rem;
margin-bottom: 2rem;
background-color: #fff;
> {
thead > tr, tbody > tr, tfoot > tr {
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
text-align: left;
padding: 1.6rem;
vertical-align: top;
border-top: 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
thead > tr > th {
font-weight: 400;
color: #757575;
vertical-align: bottom;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
caption + thead > tr:first-child > th, colgroup + thead > tr:first-child > th, thead:first-child > tr:first-child > th, caption + thead > tr:first-child > td, colgroup + thead > tr:first-child > td, thead:first-child > tr:first-child > td {
border-top: 0;
}
tbody + tbody {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
}
.table {
background-color: #fff;
}
.no-border {
border: 0;
}
}

.table-condensed > {
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
padding: 0.8rem;
}
}

.table-bordered {
border: 0;
> {
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
border: 0;
border-bottom: 1px solid #e0e0e0;
}
thead > tr > {
th, td {
border-bottom-width: 2px;
}
}
}
}

.table-striped > tbody > tr:nth-child(odd) > {
td, th {
background-color: #f5f5f5;
}
}

.table-hover > tbody > tr:hover > {
td, th {
background-color: rgba(0, 0, 0, 0.12);
}
}


This is working fine but what I am trying to do now is add in vertical and horizontal scrolling to the table. For the vertical scrolling, I would like to keep the header fixed so I know I need to give the table body a definitive height but I can't figure out where I should be doing it in my stylesheet. For the horizontal scrolling, I don't really know where to begin. I would like to be able to keep the width of all the columns the same so that if another one is added, rather than being squeezed into a defined area the horizontal scrollbar will show up.

Ideally I am looking to achieve this using only css (or SaSS in my case).

Any help with this would be much appreciated!

Thanks for your time.

Answer Source

Here is a css code:

.scroll-table-container {
border:2px solid green; 
height: 300px; 
overflow: scroll;
}
.scroll-table, td, th {
border-collapse:collapse; 
border:1px solid #777; 
min-width: 300px;}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download