CODEWITHSUNDEEP
cssscrollsasshtml-table
BeeNag
BeeNag

Reputation: 1844

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.

Upvotes: 1

Views: 2640

Answers (2)

user7393973
user7393973

Reputation: 2440

Check this example:

<html>
    <head>
        <style>
            div{display:inline-block;height:46px;overflow:scroll}
            table{background:gray}
            td{background:green}
            td,th{width:100px}
            th{background:orange}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </table>
        <div>
            <table>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Josh</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Joana</td>
                    <td>Doe</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 0

Tudu
Tudu

Reputation: 72

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;}

Upvotes: 2

Related Questions