CODEWITHSUNDEEP
csshtml-tablecss-position
Richard Owens
Richard Owens

Reputation: 155

Table with fixed thead

I am trying to use position:fixed with a table head but am struggling to keep the columns at a fixed width.

Currently, the th cells in the fixed position thead are not always the same width as the td cells in the tbody section.

.customtable {
			width: 100%;
			font-family: "Times New Roman", Times, serif;
			font-size:0.9em;
			background-color: #fff;
			table-layout:fixed;
			}
			
		.customtable thead{
			display:block;
			position:fixed;
			z-index:100;
			}

		.customtable tbody{
			display:block;
			position:relative;
			margin-top:150px;
			}
			
		.customtable th{
			background-color:#333;
			color:#fff;
			text-align:left;
			padding:7px 10px;	
			}
		.customtable td{
			background-color:#fff;
			text-align:left;
			padding:7px 10px;
			}

		th.rotate {
		  height: 140px;
		}
		
		th.rotate > div {
			transform: 
				translate(-10px, 46px)
				rotate(-90deg);
			width: 30px;
		}

		.customtable th:nth-child(1), .customtable td:nth-child(1){width:20px; max-width:20px;}/*#*/
		.customtable th:nth-child(2), .customtable td:nth-child(2){width:50px; max-width:50px;}/*id*/
		.customtable th:nth-child(3), .customtable td:nth-child(3){width:250px; max-width:250px;}/*company*/
		.customtable th:nth-child(4), .customtable td:nth-child(4){width:80px; max-width:80px;}/*forename*/
		.customtable th:nth-child(5), .customtable td:nth-child(5){width:120px; max-width:120px;}/*surname*/
		.customtable th:nth-child(6), .customtable td:nth-child(6){width:200px; max-width:200px;}/*email*/
<table class="customtable">    
    <thead>
        <tr>
          <th class="rotate"><div>#</div></th>
          <th class="rotate"><div>ID</div></th>
          <th class="rotate"><div>COMPANY</div></th>
          <th class="rotate"><div>FORENAME</div></th>
          <th class="rotate"><div>SURNAME</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td style="color:#666; background:#efefef;">1</td>
          <td style="color:#666; background:#efefef;">56</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">David</td>
          <td style="color:#666; background:#efefef;">Rumplestiltskin The Third (Junior)</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">2</td>
          <td style="color:#666; background:#efefef;">75</td>
          <td style="color:#666; background:#efefef;">Very, Very Long Company Name</td>
          <td style="color:#666; background:#efefef;">Fred</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">3</td>
          <td style="color:#666; background:#efefef;">120</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">Joe</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
    </tbody>
</table>

Can anyone advise how to get my columns to line up. I suspect it's the width/max width thing but I can't work it out. I'm on Chrome.

Upvotes: 1

Views: 1484

Answers (1)

LPK
LPK

Reputation: 536

The problem come from the padding on the th and td

When you don't add padding, it's aligned, but it don't use all the space

.customtable {
			width: 100%;
			font-family: "Times New Roman", Times, serif;
			font-size:0.9em;
			background-color: #efefef;
			table-layout:fixed;
			}
			
		.customtable thead{
			display:block;
			position:fixed;
			z-index:100;
			}

		.customtable tbody{
			display:block;
			position:absolute;
			margin-top:150px;
			}
			
		.customtable th{
			background-color:#333;
			color:#fff;
			text-align:left;	
			}
		.customtable td{
			background-color:#fff;
			text-align:left;
			}

		th.rotate {
		  height: 140px;
		}
		
		th.rotate > div {
			transform: 
				translate(-10px, 46px)
				rotate(-90deg);
			width: 30px;
		}

		.customtable th:nth-child(1), .customtable td:nth-child(1){width:20px; max-width:20px;}/*#*/
		.customtable th:nth-child(2), .customtable td:nth-child(2){width:50px; max-width:50px;}/*id*/
		.customtable th:nth-child(3), .customtable td:nth-child(3){width:250px; max-width:250px;}/*company*/
		.customtable th:nth-child(4), .customtable td:nth-child(4){width:80px; max-width:80px;}/*forename*/
		.customtable th:nth-child(5), .customtable td:nth-child(5){width:120px; max-width:120px;}/*surname*/
		.customtable th:nth-child(6), .customtable td:nth-child(6){width:200px; max-width:200px;}/*email*/
<table class="customtable">    
    <thead>
        <tr>
          <th class="rotate"><div>#</div></th>
          <th class="rotate"><div>ID</div></th>
          <th class="rotate"><div>COMPANY</div></th>
          <th class="rotate"><div>FORENAME</div></th>
          <th class="rotate"><div>SURNAME</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td style="color:#666; background:#efefef;">1</td>
          <td style="color:#666; background:#efefef;">56</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">David</td>
          <td style="color:#666; background:#efefef;">Rumplestiltskin The Third (Junior)</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">2</td>
          <td style="color:#666; background:#efefef;">75</td>
          <td style="color:#666; background:#efefef;">Very, Very Long Company Name</td>
          <td style="color:#666; background:#efefef;">Fred</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">3</td>
          <td style="color:#666; background:#efefef;">120</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">Joe</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions