Menu
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>
587
HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
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.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
