All geek questions in one place

Add horizontal scroll table

I created a simple HTML table where some data is predefined, but I want to add horizontal scrolling to this table where Top Row (Name, Title) will always be fixed. But how to add horizontal scrolling?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td><b>Name</b></td>
    <td><b>Title</b></td>
  </tr>
  <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
</table>

</body>
</html>
Run codeHide result
+4
source share
3 answers

try css

.scrollableTable {
  width: 100%;
}
.scrollableTable thead {
  display: block;
}
.scrollableTable thead th:nth-child(1) {
  width: 30%;
}
.scrollableTable thead th:nth-child(2) {
  width: 30%;
}
.scrollableTable tbody {
  display: block;
  overflow-y: scroll;
  width: 100%;
  height: 200px;
}
.scrollableTable tbody tr {
  display: block;
  width: 100%;
}
.scrollableTable tbody tr td {
  display: inline-block;
}
.scrollableTable tbody tr td:nth-child(1) {
  /* Calculate ((100% - scrollbar width) * ( % / 100)) to get proper column percent */
  width: calc((100% - 11px) * (20 / 100));
}
.scrollableTable tbody tr td:nth-child(2) {
  /* Calculate ((100% - scrollbar width) * ( % / 100)) to get proper column percent */
  width: calc((100% - 11px) * (80 / 100));
}
<table class="scrollableTable">
    <thead>
         <tr>
    <th><b>Name</b></th>
    <th><b>Title</b></th>
  </tr>
    </thead>
    <tbody>
         <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
    </tbody>
</table>
Run codeHide result

horizontal scrolling

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}
<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
              <tr>
    <th><b>Name</b></th>
     <td>Atish</td>
     <td>Sandip</td>
     <td>Rohit</td>
     <td>Atul</td>
     <td>Moumita</td>
      <td>Nirmal</td>
      <td>Susmita</td>
       <td>Sekhar</td>
        <td>Gour</td>
        <td>Jotin</td>
        <td>Shyam</td>
        <td>Dipak</td>
        <td>Partha</td>
  </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Title</th>
                <td>kumar</td>
               <td>Das</td>
                <td>Sen</td>
               <td>Sharma</td>
                <td>Sen</td>
               <td>Roy</td>
                <td>Chatterjee</td>
               <td>Das</td>
                <td>Sen</td>
               <td>Roy</td>
                <td>Das</td>
               <td>Das</td>
                <td>Sen</td>
            </tr>
        </tbody>
    </table>
</div>
Run codeHide result
+1
source

Add overflow-x to get horizontal scrolling to your inner table. Hope this solves your problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0" width="320">
<td>
   <div style="width:320px; height:auto; overflow-x: scroll;">
     <table cellspacing="0" cellpadding="1" border="1" width="300" >
	 <tr>
        <th>Name</th>
        <th>Title</th>
     </tr>
    <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip23432423423423423423423423423423423</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>  
     </table>  
   </div>
  </td>
 </tr>
</table>

</body>
</html>
Run codeHide result
+1
source

, ( ):

<html>
<head><title>Fixed Grid</title></head>
<body>


<div id="main-container">
<div style="padding-right: 16px; background-color: #E9E9E9;
    border-top: 1px solid #ccc; border-right: 1px solid #ccc" id="header-container">

<table style="margin: 0; width: 100%; table-layout:fixed;">
<colgroup>
    <col width="150px">
    <col width="150px">
  </colgroup>
  <tr>
    <td><b>Name</b></td>
    <td><b>Title</b></td>
  </tr>
 </table>
 </div>
 <div style="overflow-y: scroll; max-height: 200px;" id="detail-container">
<table  style="margin: 0; table-layout: fixed; width: 100%;">   
 <colgroup>
    <col width="150px">
    <col width="150px">
  </colgroup>
  <tr>
    <td>Atish</td>
    <td>kumar</td>
  </tr>
  <tr>
    <td>Sandip</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Atul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Moumita</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Nirmal</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Susmita</td>
    <td>Chatterjee</td>
  </tr>
  <tr>
    <td>Sekhar</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Gour</td>
    <td>Sen</td>
  </tr>
  <tr>
    <td>Jotin</td>
    <td>Roy</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Dipak</td>
    <td>Das</td>
  </tr>
  <tr>
    <td>Partha</td>
    <td>Sen</td>
  </tr>
</table>

</div>
</body>
</html>
0

Source: https://habr.com/ru/post/1679772/

More articles:


All Articles