我有一个表格,其中列数可能会发生变化(从 1 到 10),但一列应始终保持固定宽度,这样就没有多余的空间或不换行(它将用于添加或删除表中的行)。
该表格的总宽度不应超过 800 像素,并且我希望将提交按钮浮动到右侧。
有没有办法将表格列宽设置为百分比变化,并将一个静态列设置为固定像素宽度?还是会导致问题?我尝试了许多不同的方法,但似乎都不是最理想的。有没有一种优雅的方式来做到这一点?我附上了一张图片供参考:http ://bayimg.com/BAllLLaaDP 。
的HTML:
<html>
<head>
<style>
#container {
width: 800px;
}
#table_container {
padding:5px;
}
#table_container table {
width: 85%;
}
.action {
}
col {
width:29%;
}
table {
width:650px;
table-layout: fixed;
float: left;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<form>
<table class="" border=1>
<colgroup>
<col >
<col>
<col>
<col class="action">
</colgroup>
<th>First Name</th>
<th>Last Name</th>
<th>Email </th>
<th></th>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3 </td>
<td><a href="">delete row</a>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3 </td>
<td><a href="">delete row</a>
</tr>
</table>
<div class="mult_answer">
<button class="button orange">Submit Answer</button>
</div>
</form>
</div>
</body>
</html>