Tengo una tabla donde el número de columnas puede cambiar (de 1 a 10), con la excepción de una columna que siempre debe permanecer en un ancho fijo para que no haya espacio extra o no se ajuste (será utilizado para agregar o eliminar filas en la tabla).¿Puedo mezclar el ancho porcentual y el ancho de píxel en mis encabezados de tabla html?
La tabla no debe tener un ancho superior a 800px, y me gustaría tener un botón de envío flotando hacia la derecha.
¿Hay alguna manera de establecer los anchos de columna de la tabla que están cambiando como un porcentaje, y la columna estática como un ancho de píxel fijo? ¿O eso causará problemas? He intentado una serie de enfoques diferentes, pero todos parecen ser poco óptimos. ¿Hay una manera elegante de hacer esto? Adjunto una foto para referencia: http://bayimg.com/BAlLLaaDP.
El 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>
Gracias. Eliminé el ancho del elemento td, que no debía estar allí. – David