我可以在 html 表格标题中混合百分比宽度和像素宽度吗？
我有一个表，其中的列数可能会发生变化（从 1 到 10），但有一列除外，该列应始终保持固定宽度，以便没有额外的空间或不会换行（它将用于添加或删除表中的行）。
表格的总宽度不应超过 800 像素，并且我希望有一个提交按钮浮动在右侧。
有没有一种方法可以将表格列宽度设置为百分比变化，并将一个静态列设置为固定像素宽度？或者这会引起问题吗？我尝试了多种不同的方法，但似乎都不是最理想的。有没有一种优雅的方法来做到这一点？我附上了一张图片供参考：http://bayimg.com/BAlLLaaDP。
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>
I have a table where the number of columns may change (from 1 to 10), with the exception of one column which should always stay at a fixed width so that there's no extra space or it doesn't wrap (it will be used to add or delete rows in the table).
The table should be no wider than 800px total, and I'd like to have a submit button floated to the right.
Is there a way to set the table column widths that are changing as a percentage, and the one static column as a fixed pixel width? Or will that cause problems? I've tried a number of different approaches, but all seem suboptimal. Is there an elegant way to do this? I've attached a picture for reference: http://bayimg.com/BAlLLaaDP.
The 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果所有行的总宽度不超过 100%（如果将缩放多于行或表格以适应内容），则一个表中可以存在宽度以像素和百分比为单位的行。
如果您仅将
col用于宽度目的，则可以向第th元素添加宽度。最好保留至少一列没有宽度，以便它可以缩小以适应。PS 我不明白为什么
td元素需要width: 100%;。There can be rows with width in pixels and percentage in one table if total width of all rows is not more than 100% (if more than rows or table will be scaled to fit content).
You can add width to
thelements if you're usingcolonly for the purpose of width. It is better to leave at least one column without width so it can shrink to fit.P.S. I don't understand why do you need
width: 100%;fortdelement.