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

时间：2017-05-19 04:41:12

标签： html css html-table

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

import {Injectable} from '@angular/core';
import {Http,Headers,Response,URLSearchParams} from '@angular/http';
import {User} from "./User";
import {Observable} from "rxjs";

@Injectable()
export class HttpService{
private loggedIn = false;


  constructor(private http: Http){
 }

 getData(){return this.http.get('/test')}

 postData(User){
   let headers = new Headers({ 'Content-Type': 'application/x-www-form-
 urlencoded' });
 var params = new URLSearchParams();
 params.set('username',User.username);
 params.set('password',User.password);

 return this.http.post('/login', params.toString(), { headers: headers })
  .map(res => res.json())
  .map((res)=>{
    if(res.status == 200)
      {
          this.loggedIn = true
      }
      return res.success;
  })
  .catch((error:any) =>{return Observable.throw(error);});;
}

  isLoggedIn() {
    return this.loggedIn;
  }

  logout() {
    this.loggedIn = false;
 }

 }

import {Inject, Injectable} from "@angular/core";
import {CanActivate} from "@angular/router";
import {HttpService} from "./http.service";

 @Injectable()
  export class CanActivateViaAuthGuard implements CanActivate{

 constructor(@Inject(HttpService) private httpService: HttpService){}

 canActivate(){return this.httpService.isLoggedIn();
 }
}

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;
}

2 个答案:

答案 0 :(得分：1)

试用此代码

使用translate代替position

＆＃13;
＆＃13; 
$(".tbldiv").scroll(function(){
  var translate = "translate(0," + this.scrollTop + "px)";
  $('thead').css('transform',translate);
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以使用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>

相关问题
最新问题