html表格填充随页面大小自动缩放,如何设置HTML页面自适应宽度的table

设置HTML页面自适应宽度的table的方法：

1、定义html页面table代码：

First Name

Last Name

Gender

Birth Date

Address

Zip Code

Nationality

Contact Number

Email

Username

Course

Year

ID Number

Subjects

2、控制表格自适应的样式css代码：

.content {

width: 1100px;

height: 200px;

background: #fdfdfd;

margin: 0px auto;

position: relative;

top: 40px;

border: 1px solid #aaaaaa;

}

.content .content-header {

width: 100%;

height: 40px;

background-color:#aaa;

background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);

background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));

background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);

background-image:-o-linear-gradient(top,#eeeeee,#cccccc);

background-image:linear-gradient(to bottom,#eeeeee,#cccccc);

border-bottom: 1px solid #aaaaaa;

}

.content-loader {

overflow: scroll;

}

.content-loader table {

width: auto;

background: #aaa;

}

.content-loader table tr {

background: #eee;

}

.content-loader tr td {

white-space: nowrap;

}

3、完整代码如下：

.content {

width: 800px;

height: 200px;

background: #fdfdfd;

margin: 0px auto;

position: relative;

top: 40px;

border: 1px solid #aaaaaa;

}

.content .content-header {

width: 100%;

height: 40px;

background-color:#aaa;

background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);

background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));

background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);

background-image:-o-linear-gradient(top,#eeeeee,#cccccc);

background-image:linear-gradient(to bottom,#eeeeee,#cccccc);

border-bottom: 1px solid #aaaaaa;

}

.content-loader {

overflow: scroll;

}

.content-loader table {

width: auto;

background: #aaa;

}

.content-loader table tr {

background: #eee;

}

.content-loader tr td {

white-space: nowrap;

}

First Name	Last Name	Gender	Birth Date	Address
greennndddgreennndddgreennnddd	Mnddsdsdsweeweewrewrewrwerew	female	1999-09-08	jskfksdfsdflsdf;sldfsdkflsdfksdfkdsfldslf

4、运行效果如下：

表格的宽度随着内容的变化而变化。