固定表标题与正文的列宽不匹配

Question

我只是想让我的表格有一个垂直滚动条，我最终将整个表格包含在一个div中，使表格头处于固定位置，这就是结果。有没有一种简单的方法可以在表格中使用一个简单的滚动条，并且在将表格保持在页面中间的同时不会削减表格的宽度。

thead, tr, th, td, tbody{
	border: 1px solid;
	text-align: center;
	padding: 3px;
	
}
th{
	background-color:#99ccff;
	height: 40px;
	font-size: 20px;
}
tr{
	width: 500%;
	height: 20px;
	font-size: 17px;
}
tr:nth-child(even) {
	background-color: #CCFFFF;
}
tr:nth-child(odd) {
	background-color: #fae8d1;
}
thead{
	position: fixed;
	width: 1200px;
}
.tbldiv{
	width: 1200px;
	height: 600px;
	border: 2px solid;
	overflow: auto;
}

<div class="tbldiv">
	<table class="scroll">
		<thead>
			<tr>
				<th class="col-md-2">Name</th>
				<th class="col-md-2">Birthday</th>
				<th class="col-md-2">Gender</th>
				<th class="col-md-2">Marital</th>
				<th class="col-md-2">Address</th>
				<th class="col-md-2">Telephone</th>
				<th class="col-md-2">Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
		</tbody>
	</table>
</div>

Answer 1

试试这段代码

使用translate而不是position

$(".tbldiv").scroll(function(){
  var translate = "translate(0," + this.scrollTop + "px)";
  $('thead').css('transform',translate);
});

thead, tr, th, td, tbody{
	border: 1px solid;
	text-align: center;
	padding: 3px;
	
}
table.scroll {
    table-layout: fixed;
}
th{
	background-color:#99ccff;
	height: 40px;
	font-size: 20px;
}
tr{
	width: 500%;
	height: 20px;
	font-size: 17px;
}
tr:nth-child(even) {
	background-color: #CCFFFF;
}
tr:nth-child(odd) {
	background-color: #fae8d1;
}
.tbldiv{
	float:left;
	height: 200px;
	border: 2px solid;
	overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="tbldiv">
	<table class="scroll">
		<thead>
			<tr>
				<th class="col-md-2">Name</th>
				<th class="col-md-2">Birthday</th>
				<th class="col-md-2">Gender</th>
				<th class="col-md-2">Marital</th>
				<th class="col-md-2">Address</th>
				<th class="col-md-2">Telephone</th>
				<th class="col-md-2">Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
		</tbody>
	</table>
</div>

Answer 2

你可以使用CSS来做到这一点。

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
        </tbody>
    </table>
</div>