设置HTML页面自适应宽度的table的方法:
1、定义html页面table代码:
First Name | Last Name | Gender | Birth Date | Address | Zip Code | Nationality | Contact Number | 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、运行效果如下:
表格的宽度随着内容的变化而变化。