Can I mix percent width and pixel width in my html table headers?
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>
Answer
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 th elements if you're using col only 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%; for td element.