Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make a responsive table using css

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 695
    Comment on it

    In this blog i'll show how can you make responsive table. To make a table responsive first step is to know "nth-of-type" , that is a selector of css3 you can see that in css as i explain it ( In css - line 50 ), now we will make a table

    --Html--

    <div>
      <table width="100%" border="1">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Item Code</th>
          </tr>
        </thead>
        <tr>
          <td>Item 3</td>
          <td>001</td>
        </tr>
        <tr>
          <td>Item 4</td>
          <td>001</td>
        </tr>
        <tr>
          <td>Item 5</td>
          <td>004</td>
        </tr>
      </table>
    </div>
    

    After complete table we come on css style sheet here i using css3 selector and for mobile screen i just change table heading text with selector and align all table using position and other . and It will works properly .

    --css--

    * {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px
    }
    div {
        width: 600px;
        margin: 0 auto
    }
    table {
        border-collapse: collapse;
    }
    td {
        padding: 4px
    }
    th {
        text-align: left;
        padding: 4px
    }
     @media only screen and (max-width : 600px) {
    div {
        width: 500px
    }
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border-bottom: 1px solid #CCC
    }
    tr:last-child {
        border-bottom: none
    }
    td {
        border: none;
        position: relative;
        padding-left: 30%;
    }
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /*----CSS3 Selector-----*/
    td:nth-of-type(1):before {
        content: "Item Name";
    }
    td:nth-of-type(2):before {
        content: "Item Code";
    }
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: