1. Inicio
  2. Pregunta y respuesta
  3. td anchos, no funciona?

td anchos, no funciona?

2012-06-18 18 views
43

Así que tienen el código aquí:td anchos, no funciona?

<table> 
    <tr> 
     <td width="200px" valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td width="1000px" valign="top">Content</td> 
    </tr> 
</table>

con el CSS

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

Funciona bien en mi navegador y he probado en todos los navegadores Mac y PC, pero alguien se queja de que el td con el width de 200 sigue cambiando de ancho. No tengo idea de lo que está hablando. ¿Alguien sabe por qué él o ella está viendo el cambio de ancho en el td?

Fuente

2012-06-18 user979331

+0

Entonces, ¿cómo podemos ayudar cuando tenemos aún menos idea de lo que la queja se trata? Ni siquiera podemos probar la página real, y no tenemos información sobre la persona y su entorno de navegación. –

Respuesta

71

que debe ser:

<td width="200">

o

<td style="width: 200px">

Tenga en cuenta que si su celda contiene algún contenido que no encaja en el 200 píxeles (como somelongwordwithoutanyspaces), la célula se estirará sin embargo, a menos que su CSS contenga table-layout: fixed para la tabla.

EDITAR

Como se señaló Kristina niño en su respuesta, se debe evitar tanto el atributo width y el uso de CSS en línea (con el atributo style). Es una buena práctica separar el estilo y la estructura tanto como sea posible.

Fuente

2012-06-18 20:28:56 bfavaretto

+0

Gracias bfavaretto ... intentando que ahora – user979331

+28

debería ser la tabla '

' – user979331

+0

@ user1193385, sí, eso es todo. Pero evite usar css en línea si es posible. – bfavaretto

4

No se pueden especificar unidades en width/height atributos de una tabla; estos están siempre en píxeles, pero no debe usarlos en absoluto ya que están en desuso.

Fuente

2012-06-18 20:29:18 lanzz

17

El ancho y/o alto en las tablas ya no son estándar; como dice Ianzz, están en desuso. En vez la mejor manera de hacer esto es tener un elemento de bloque dentro de su celda de la tabla que contendrá la celda abierta a su tamaño deseado:

<table> 
    <tr> 
     <td valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td valign="top" class="content">Content</td> 
    </tr> 
</table>

CSS

.content { 
    width: 1000px; 
} 

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
    width: 200px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

Fuente

2012-06-18 20:43:52

+4

Desafortunadamente, la tecnología del correo electrónico está muchos años atrás de la especificación HTML actual, y en ese caso, las tablas y el CSS en línea son tristemente inevitables. – MikeTheLiar

+1

Nadie hablaba de correos electrónicos html, esto era para la navegación web básica de escritorio. Pero sí, para los correos electrónicos, las tablas y los css en línea son la única forma de compilarlos. Gracias, Microsoft ... –

+2

Solo abro el correo electrónico porque eso es lo que me trajo aquí; Estaba teniendo este mismo problema con el correo electrónico. – MikeTheLiar

3

tratar de utilizar

word-wrap: break-word;

espero que esto ayude

Fuente

2012-12-30 17:39:27 Med7at

0

Tenga en cuenta que ajustar el ancho de una columna en thead afectará t que toda la tabla

<table> 
    <thead> 
     <tr width="25"> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
    <tr> 
     <td>Joe</td> 
     <td>[email protected]</td> 
    </tr> 
</table>

En mi caso, la anchura de la> tr fue anulando la anchura de la culata en T en la mesa> tr> td directamente.

Fuente

2014-03-28 05:44:10

9 
<table style="table-layout:fixed;">

Esto forzará el ancho de estilo <td>. Si el texto lo sobrecarga, se superpondrá al otro texto <td>. Por lo tanto, intente utilizar consultas de medios.

Fuente

2016-07-28 15:08:40 mateostabio

+1

En mi caso de uso, esto fue tan importante como la respuesta de bfavaretto – brasofilo

0

probar esto:

word-break: break-all;

Fuente

2016-11-23 09:04:05

Cuestiones relacionadas

 Cuestiones relacionadas