Hacer que todas las celdas tengan el mismo ancho (¿con jQuery?)

Si tengo la siguiente estructura de tabla:

<table cellpadding="0" cellspacing="0" border="0" width=100%>
<tr>
    <th>
    </th>
    <th>
    Col Header 1
    </th>
    <th>
    Col Header 2
    </th>
    <th>
    Col Header 3
    </th>
</tr>
<tr>
    <th>
    Row Header
    </th>
    <td>
    cell 1
    </td>
    <td>
    cell 2
    </td>
    <td>
    cell 3
    </td>
</tr>
</table>

¿Cómo hago que todos los TD tengan el mismo ancho? Tenga en cuenta que tengo TH al comienzo de mis filas. Estoy bien para usar jQuery si es necesario.


EDIT:

De las sugerencias a continuación, estoy comenzando a inclinarme más hacia la solución jQuery. Básicamente, lo que necesitaré para hacerlo:

  1. Obtenga un ancho de TABLE
  2. Obtenga un ancho de TH al comienzo de FILA
  3. Reste el n. ° 2 del n. ° 1
  4. Dividir el resto por el número de TD

Creo que es un poco complicado, pero debería hacer el trabajo ...

preguntado el 16 de mayo de 11 a las 16:05

Ah, una cosa me acaba de golpear. ¿Está preguntando cómo dejar que las columnas varíen en ancho según el contenido, pero configurar todas las columnas para que tengan el mismo ancho que la más ancha? Porque ese sería un problema completamente diferente al que todos hemos respondido hasta ahora ... y, sería un poco más difícil ... -

4 Respuestas

¿Hay alguna razón por la que no pueda usar CSS?

td {
    width: 300px;
}

Si quieres todos los TD: s y TH: s para tener el mismo ancho, simplemente establezca el ancho en TH en su lugar:

th {
    width: 300px;
}

Los TD: s obtendrán su ancho de la columna, y la columna obtendrá su ancho de TH: s.

EDITAR: La edición de su pregunta hace que sea mucho más fácil entender lo que quiere hacer :)

Definitivamente, buscaría hacer esto con CSS Flexible Box Model (flexbox) para navegadores compatibles. http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Puede usar Modernizr para verificar la compatibilidad de flexbox: http://www.modernizr.com/

Debido al posible desorden del código necesario para hacer lo que desea con javascript, también consideraría si los navegadores menos habilitados verdaderamente necesita esta característica o no.

Sin embargo, no es que sea imposible implementarlo en javascript, en absoluto.

Si los datos de la tabla son estáticos una vez cargados, debería ser bastante sencillo tomar el ancho de la tabla y la primera columna, y dividir el resto entre el resto de las columnas.

Sin embargo, si el contenido de la tabla puede cambiar después de cargarse inicialmente, deberá determinar cómo verificar los cambios y volver a aplicar el nuevo estilo cada vez. Probablemente colocará algunos detectores de eventos, pero qué eventos necesita escuchar dependen de qué acciones podrían cambiar el contenido de la tabla ...

Además, recuerde que un usuario puede hacer zoom en el texto de la página web. Esto también podría estropear el ancho de las columnas, supongo ...

contestado el 16 de mayo de 11 a las 21:05

Solo un pensamiento, porque está usando esto en el costado (no en la parte superior), ¿no alinearía eso solo la primera columna? Ben

Está usando TH: s en la parte superior. Vea el contenido del primer TR. De lo contrario, estaría en lo correcto, sí. - Adrian Schmidt

No sé cuál puede ser el problema de la mesa. - de santa

Mi mal, no me di cuenta de que el primer tr fue solo esto. - Ben

Utilizo TH en la parte superior, para los encabezados de columna y al comienzo de cada TR para los encabezados de FILA. - de santa

Es más fácil de peinar td anchos cuando conoce el ancho de píxel de la tabla.

Por ejemplo, si el width = 300px entonces cada td podría tener un estilo de 100px.

Sin embargo, si su mesa debe ser width = 100% entonces podrías establecer el ancho en cada td a 33%.

Si tienes padding, marginso borders al table, estos afectarán el ancho de la td.

contestado el 16 de mayo de 11 a las 20:05

Podrías hacerlo con css.
Sin embargo, debe agregar th si los necesita. Algo como

table tr td
{
    width: 400px;
}

O, con jquery

$('table tr td').each(function() {$(this).css('width','400px');});

O revisado (por Adrian)

$('table tr td').css('width','400px');

contestado el 16 de mayo de 11 a las 20:05

No es necesario llamar a .each () - $ ('table tr td'). Css ('width', '400px'); hará lo mismo. - Adrian Schmidt

Establezca el ancho en porcentaje:

td, th { width: 33%; }

contestado el 16 de mayo de 11 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.