如何设置HTML页面自适应宽度的table
2016-08-08 · 百度知道合伙人官方认证企业
育知同创教育
设置HTML页面自适应宽度的table的方法：
1、定义html页面table代码：
<div class="content">
<div class="content-header">
</div>
<div class="content-loader">
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Birth Date</td>
<td>Address</td>
<td>Zip Code</td>
<td>Nationality</td>
<td>Contact Number</td>
<td>Email</td>
<td>Username</td>
<td>Course</td>
<td>Year</td>
<td>ID Number</td>
<td>Subjects</td>
</tr>
</tbody>
</table>
</div>
</div>
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、完整代码如下：
<html>
<style>
.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;
}
</style>
<body>
<div class="content">
<div class="content-header">
</div>
<div class="content-loader">
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Birth Date</td>
<td>Address</td>
</tr>
<tr>
<td>greennndddgreennndddgreennnddd</td>
<td>Mnddsdsdsweeweewrewrewrwerew</td>
<td>female</td>
<td>1999-09-08</td>
<td>jskfksdfsdflsdf;sldfsdkflsdfksdfkdsfldslf</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
4、运行效果如下：
表格的宽度随着内容的变化而变化。
