固定目录的桌子

Question

我正在尝试使用position：fixed与表头，但正在努力将列保持在固定的宽度。

当前，固定位置thead中的th个单元的宽度并不总是与tbody部分中的td单元相同。

.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>

任何人都可以建议如何排列我的专栏。我怀疑这是宽度/最大宽度，但我无法解决。我在使用Chrome。

Answer 1

问题来自th和td的填充

当您不添加填充时，它会对齐，但不会占用所有空间

.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>