CODEWITHSUNDEEP
htmlcss
user5005768Himadree
user5005768Himadree

Reputation: 1439

How to align this table header with its columns in both case scrollbar on overflow & normal

If you see the table, you will notice that due to scroll bar on overflow alignment of table header & table rows mismatch.

How to maintain correct alignment among them in both cases: normal or overflow.

Here is the source code below.

table {
	font-family: arial, sans-serif; 
	border-collapse: collapse; 
	
}
html {
	overflow-y: scroll;
}

tbody {
	display:block;
	height:100px;
	overflow:auto;
}
thead, tbody tr {
	display:table;
	width:100%;
	table-layout:fixed;
}
thead {
	width: calc(100%);
}

th{
	background-color: #2c3539; 
	color:white; 
	border: 1px solid black;  
	text-align: left; 
	padding: 8px;
}

td{			   						
	border: 1px solid black;  
	text-align: left; 
	padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
   <thead>
      <tr>
         <th>Office</th>
         <th>Total Task</th>
         <th>Done</th>
         <th>Not Done</th>
      </tr>
   </thead>
   <tbody>      
      <tr>
         <td>Office-1</td>
         <td>3</td>
         <td>0</td>
         <td>3</td>
      </tr>
      <tr>
         <td>Office-2</td>
         <td>7</td>
         <td>0</td>
         <td>7</td>
      </tr>
      <tr>
         <td>Office-3</td>
         <td>2</td>
         <td>0</td>
         <td>2</td>
      </tr>
      <tr>
         <td>Office-3</td>
         <td>1</td>
         <td>0</td>
         <td>1</td>
      </tr>
   </tbody>
</table>
<div>

Upvotes: 0

Views: 48

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

For overflowing-y issue you can try width calc on thead you already set that but that calc not woring. Check the css below I just separet the thead and tbody tr class for calc the width. Check scroll-y is working.

.table {
font-family: arial, sans-serif; 
border-collapse: collapse;

}


tbody {
display:block;
height:100px;
overflow:auto;
}
 tbody tr {
display:table;
width: calc(100% - 1px); /*this 1px is the border which cause the overflow-x*/
table-layout:fixed;


}
thead {
  display:table;
width: calc(100% - 17.5px);/*thead Width - (Scrollbar width + border Width) */
  	table-layout:fixed;
}

th{
background-color: #2c3539; 
color:white; 
border: 1px solid black;  
text-align: left; 
padding: 8px;
}

td{			   						
border: 1px solid black;  
text-align: left; 
padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
   <thead>
      <tr>
         <th>Office</th>
         <th>Total Task</th>
         <th>Done</th>
         <th>Not Done</th>
      </tr>
   </thead>
   <tbody>      
      <tr>
         <td>Office-1</td>
         <td>3</td>
         <td>0</td>
         <td>3</td>
      </tr>
      <tr>
         <td>Office-2</td>
         <td>7</td>
         <td>0</td>
         <td>7</td>
      </tr>
      <tr>
         <td>Office-3</td>
         <td>2</td>
         <td>0</td>
         <td>2</td>
      </tr>
      <tr>
         <td>Office-3</td>
         <td>1</td>
         <td>0</td>
         <td>1</td>
      </tr>
   </tbody>
</table>
</div>

Upvotes: 1

Tommy
Tommy

Reputation: 134

just remove 

overflow:auto

from you css file...

here fiddle example fiddle

Upvotes: 1

Related Questions