Monday 8 February 2021

CSS-Only Scrollable Table or gridview with fixed headers pure css

 ///////// Style 

<style type="text/css">

        .Tbl-fixed-headers {

            width: 750px;

            table-layout: fixed;

            border-collapse: collapse;

        } 

            .Tbl-fixed-headers th {

                text-decoration: underline;

            } 

            .Tbl-fixed-headers th,

            .Tbl-fixed-headers td {

                padding: 5px;

                text-align: left;

            } 

                .Tbl-fixed-headers td:nth-child(1),

                .Tbl-fixed-headers th:nth-child(1) {

                    min-width: 200px;

                } 

                .Tbl-fixed-headers td:nth-child(2),

                .Tbl-fixed-headers th:nth-child(2) {

                    min-width: 200px;

                }

 

                .Tbl-fixed-headers td:nth-child(3),

                .Tbl-fixed-headers th:nth-child(3) {

                    width: 350px;

                } 

            .Tbl-fixed-headers thead {

                background-color: #333;

                color: #FDFDFD;

            } 

                .Tbl-fixed-headers thead tr {

                    display: block;

                    position: relative;

                }

 

            .Tbl-fixed-headers tbody {

                display: block;

                overflow: auto;

                width: 100%;

                height: 300px;

            } 

                .Tbl-fixed-headers tbody tr:nth-child(even) {

                    background-color: #DDD;

                } 

        .old_ie_wrapper {

            height: 300px;

            width: 750px;

            overflow-x: hidden;

            overflow-y: auto;

        }

            .old_ie_wrapper tbody {

                height: auto;

            }

    </style>


//////////////// Html


<table class="Tbl-fixed-headers" border="1">

  <thead>

    <tr>

      <th>Name</th>

      <th>Color</th>

      <th>Description</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Apple</td>

      <td>Red</td>

      <td>These are red and this is healthy</td>

    </tr>

    <tr>

      <td>Pear</td>

      <td>Green</td>

      <td>These are green and this is healthy</td>

    </tr>

    <tr>

      <td>Grape</td>

      <td>Purple / Green</td>

      <td>These are purple and green and this is healthy</td>

    </tr>

    <tr>

      <td>Orange</td>

      <td>Orange</td>

      <td>These are orange and this is healthy</td>

    </tr>

    <tr>

      <td>Banana</td>

      <td>Yellow</td>

      <td>These are yellow and this is healthy</td>

    </tr>

    <tr>

      <td>Kiwi</td>

      <td>Green</td>

      <td>These are green and this is healthy</td>

    </tr>

    <tr>

      <td>Plum</td>

      <td>Purple</td>

      <td>These are Purple and this is healthy</td>

    </tr>

    <tr>

      <td>Watermelon</td>

      <td>Red</td>

      <td>These are red and this is healthy</td>

    </tr>

    <tr>

      <td>Tomato</td>

      <td>Red</td>

      <td>These are red and this is healthy</td>

    </tr>

    <tr>

      <td>Cherry</td>

      <td>Red</td>

      <td>These are red and this is healthy</td>

    </tr>

    <tr>

      <td>Cantelope</td>

      <td>Orange</td>

      <td>These are orange inside and this is healthy</td>

    </tr>

    <tr>

      <td>Honeydew</td>

      <td>Green</td>

      <td>These are green inside and this is healthy</td>

    </tr>

    <tr>

      <td>Papaya</td>

      <td>Green</td>

      <td>These are green and this is healthy</td>

    </tr>

    <tr>

      <td>Raspberry</td>

      <td>Red</td>

      <td>These are red and this is healthy</td>

    </tr>

    <tr>

      <td>Blueberry</td>

      <td>Blue</td>

      <td>These are blue and this is healthy</td>

    </tr>

    <tr>

      <td>Mango</td>

      <td>Orange</td>

      <td>These are orange and this is healthy</td>

    </tr>

    <tr>

      <td>Passion Fruit</td>

      <td>Green</td>

      <td>These are green and this is healthy</td>

    </tr>

  </tbody>

</table>



/////////////// Result




1 comment:

  1. Me too, thanks for sharing this..
    I'm having a little problem I cant subscribe your rss feed, I'm using google reader fyi.
    RCG Online Store

    ReplyDelete

Excel Sort values in ascending order using function TEXTJOIN

 Excel ::  Text ::  1,3,5,2,9,5,11 Result :: 1,2,3,5,5,9,11 Formula ::     TEXTJOIN ( ",",1,SORT(MID(SUBSTITUTE( A1 ,","...