how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum view-CodePudding

How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.

table{
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
    padding: 6px 15px;
}
th{
    background: #42444e;
    color: #fff;
    text-align: left;
    position: static;
    top: 50px;
}
tbody tr td img{
    flex-wrap: wrap;
    pointer-events: none;       
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    width: 30px;
    height: 30px;
    float: none;
    display:block;
    object-fit: fill;
    border-radius: 10%;
}
tr:first-child th:first-child {
  border-top-left-radius: 6px;
}
tr:first-child th:last-child {
  border-top-right-radius: 6px;
}
td{
    border-right: 1px solid #c6c9cc;
    border-bottom: 1px solid #c6c9cc;
}
td:first-child {
  border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
  background: #eaeaed;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

<table>
        <thead>
            <tr>
                <th>Image</th>
                <th>ID</th>
                <th>Date</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone no.</th>
                <th>Role</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><img src="img/4.jpeg"></td>
                <td>1</td>
                <td>445445564</td>
                <td>Umann goswami</td>
                <td>[email protected]</td>
                <td>9999672450</td>
                <td>Admin</td>
            </tr>
                        <tr>
                <td><img src="img/4.jpeg"></td>
                <td>1</td>
                <td>445445564</td>
                <td>Umann goswami</td>
                <td>[email protected]</td>
                <td>9999672450</td>
                <td>Admin</td>
            </tr>
                        <tr>
                <td><img src="img/4.jpeg"></td>
                <td>1</td>
                <td>445445564</td>
                <td>Umann goswami</td>
                <td>[email protected]</td>
                <td>9999672450</td>
                <td>Admin</td>
            </tr>
                        <tr>
                <td><img src="img/4.jpeg"></td>
                <td>1</td>
                <td>445445564</td>
                <td>Umann goswami</td>
                <td>[email protected]</td>
                <td>9999672450</td>
                <td>Admin</td>
            </tr>
        </thead>
    </table>

CodePudding user response：

set position sticky of header
and for table overflow-y set as auto

    .fixTable {
      overflow-y: auto;
      height: 110px;
    }
    .fixTable thead th {
      position: sticky;
      top: 0;
    }
    table {
      border-collapse: collapse;        
      width: 100%;
    }
    th,
    td {
      padding: 8px 15px;
      border: 2px solid #529432;
    }
    th {
      background: #060606;
    }

<!DOCTYPE html>
<html>
  
<head>
  
</head>
  
<body>
  <div >
    <table>
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
        </tr>
      </thead>
  
      <tbody>
        <tr>
          <td>1.1</td>
          <td>2.1</td>
        </tr>
        <tr>
          <td>1.2</td>
          <td>2.2</td>
        </tr>
        <tr>
          <td>1.3</td>
          <td>2.3</td>
        </tr>
        <tr>
          <td>1.4</td>
          <td>2.4</td>
        </tr>
        <tr>
          <td>1.5</td>
          <td>2.5</td>
        </tr>
      </tbody>
        
    </table>
  </div>
</body>
  
</html>

CodePudding user response：

I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.

thead tr th{
  position: sticky;
  top:0;
  left:0;
  right:0;
}