locked
fixed headers in html css RRS feed

Answers

  • User-1142886626 posted

    Hi Bakhtawar Ashiq,

    If you want add scroll, you should add a div then attach css on it.

    Such as:

    .container {
      overflow-y: auto;
      height: 200px;
    }
    

    You need add div element in your <th> tag. This will be your fixed headers.

    <th>
      Name
      <div>
      name
      </div>
    </th>
    <th>
      Class
      <div>
      class
      </div>
    </th>  
    

    Finally, add below css.

    .container {
      overflow-y: auto;
      height: 200px;
    }
    th div{
      ;
      background: red;
      color: blue;
      padding: 9px 25px;
      top: 0;
      margin-left: -30px;
      line-height: normal;
      border-left: 1px solid #800;
      width:365px;
    }
    

    Screenshot:

    Best Regards,

    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 28, 2016 10:40 AM

All replies

  • User-1404113929 posted

    hi,

    you have to solve your problem while maintain separate tables for both header and body content.

    thanks,

    murali

    Thursday, August 25, 2016 5:48 AM
  • User-1142886626 posted

    Hi Bakhtawar Ashiq,

    It seems you want fix a header on scroll. You could by set css property to achieve this, or you can use bootstrap to achieve this.

    There have two examples, will be helpful with you.

    https://jsfiddle.net/dPixie/byB9d/3/

    http://www.bootply.com/JnOYtO9xzn

    Besides, you said “how to omit white space after class column”. Can you explain more about your requirement?

     

    Best Regards,

    Ailleen

    Thursday, August 25, 2016 8:14 AM
  • User639567535 posted

    check this fiddle

    https://jsfiddle.net/kmhteLte/1/

    i remove white space when i do that there is no scroll 

    so how i add scroll and headers in that js fiddle ?

    please check line 

    Thursday, August 25, 2016 8:19 AM
  • User-1142886626 posted

    Hi Bakhtawar Ashiq,

    If you want add scroll, you should add a div then attach css on it.

    Such as:

    .container {
      overflow-y: auto;
      height: 200px;
    }
    

    You need add div element in your <th> tag. This will be your fixed headers.

    <th>
      Name
      <div>
      name
      </div>
    </th>
    <th>
      Class
      <div>
      class
      </div>
    </th>  
    

    Finally, add below css.

    .container {
      overflow-y: auto;
      height: 200px;
    }
    th div{
      ;
      background: red;
      color: blue;
      padding: 9px 25px;
      top: 0;
      margin-left: -30px;
      line-height: normal;
      border-left: 1px solid #800;
      width:365px;
    }
    

    Screenshot:

    Best Regards,

    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 28, 2016 10:40 AM