¿Por qué mi tabla HTML no respeta el ancho de mi columna CSS?

Question

Tengo una tabla HTML y quiero que las primeras columnas sean bastante largas. Estoy haciendo esto en el CSS:

td.longColumn 
{ 
    width: 300px; 
} 

y aquí es una versión simplificada de mi mesa

<table> 
    <tr> 
    <td class='longColumn'></td> 
    <td class='longColumn'></td> 
    <td class='longColumn'></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    [ . . and a bunch more columns . . .] 
    </tr> 
</table> 

Por alguna razón la tabla parece hacer esta columna < 300px cuando hay una gran cantidad de columnas. Básicamente quiero que mantenga ese ancho sin importar qué (y solo aumente la barra de desplazamiento horizontal).

El contenedor en el que se encuentra la tabla no tiene ningún tipo de ancho máximo, así que no puedo entender por qué está comprimiendo esta columna en lugar de respetar este ancho.

¿Hay alguna forma de todo esto así que pase lo que pase, esta columna mantendrá un cierto ancho?
Aquí es el CSS de la div contenedor exterior:

#main 
{ 
    margin: 22px 0 0 0; 
    padding: 30px 30px 15px 30px; 
    border: solid 1px #AAAAAA; 
    background-color: #fff; 
    margin-bottom: 30px; 
    margin-left: 10px; 
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */ 
    float: left; 
    /*width: 1020px;*/ 
    min-width:1020px; 
    display: block; 
    overflow: visible; 
    z-index: 0; 
} 

Answer 1

Usted puede obtener mor Suerte al establecer anchos para las celdas de su tabla si aplica la regla table-layout: fixed a la tabla; esto me ha ayudado con un montón de problemas con cell-sizing al usar tablas. No recomendaría cambiar a usar solo DIV para organizar su contenido si se ajusta al propósito de las tablas: para mostrar datos multidimensionales.

Answer 2

no puede modificar <td> width; es decir, ancho de la columna no es ajustable. Puede agregar el estilo white-space:nowrap; que podría ayudar. O puede agregar   para agregar espacio a las columnas.

Tal vez usted podría fijar la anchura col la forma HTML: <td width="70%">January>/td>

Por desgracia, en HTML 4.01 y más tarde, de esa manera no es válido.

Answer 3

¿Qué tal algo como esto ...

http://jsfiddle.net/qabwb/1/

HTML

<div id="wrapper"> 
    <div class="row"> 
     <div class="column first longColumn">stuff</div> 
     <div class="column longColumn">more stuff</div> 
     <div class="column">foo</div> 
     <div class="column">jsfiddle</div> 
    </div> 
    <div class="row"> 
     <div class="column first longColumn">stuff</div> 
     <div class="column longColumn">more stuff</div> 
     <div class="column">foo</div> 
     <div class="column">jsfiddle</div> 
    </div> 
    <div class="row"> 
     <div class="column first longColumn">stuff</div> 
     <div class="column longColumn">more stuff</div> 
     <div class="column">foo</div> 
     <div class="column">jsfiddle</div> 
    </div> 
</div> 

CSS

#wrapper { 
    min-width: 450px; 
    height: auto; 
    border: 1px solid lime; 
} 

.row { 
    padding: 4px; 
} 
.column { 
    border: 1px solid orange; 
    border-left: none; 
    padding: 4px; 
    display: table-cell; 
} 

.first { 
    border-left: 1px solid orange; 
} 

.longColumn { 
    min-width: 150px; 
} 

Answer 4

Estoy de acuerdo con Hristo, pero hay algunos casos donde la tabla debe ser utilizada y la solución a su problema de tabla es agregar debajo de la clase a la tabla y luego cambiar cualquier ancho td según su necesidad.

.tables{ border-collapse:collapse; table-layout:fixed;} 

Espero que esto ayude a alguien que está buscando una solución de mesa!

Answer 5

Tuve el mismo problema con un grupo de columnas donde quería columnas espaciadores. que solía hacer:

<td style='width: 10px;'>&nbsp;</td> 

Pero cuando la mesa era más ancha que la ventana, los espaciadores no eran realmente 10px, pero tal vez 5px. Y usar solo DIVs sin TABLE no era una opción en mi caso. así que he intentado:

<td><div style='width: 10px;'></div></td> 

y funcionó muy bien! :)

Answer 6

La mejor manera de establecer los anchos de columna (td) es usar un encabezado de tabla (th's). Los encabezados de tabla establecerán automáticamente el ancho de sus td. Solo tiene que asegurarse de que sus columnas dentro de su thead tengan el mismo número de columnas en su tbody.

Échale un vistazo aquí: http://jsfiddle.net/tKAj8/

HTML

<table> 
    <thead> 
     <tr> 
      <th class="short-column">Short Column</th> <!-- th sets the width --> 
      <th class="short-column">Short Column</th> <!-- th sets the width --> 
      <th class="long-column">Long Column</th> <!-- th sets the width --> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td class="lite-gray">Short Column</td> <!-- td inherits th width --> 
      <td class="lite-gray">Short Column</td> <!-- td inherits th width --> 
      <td class="gray">Long Column</td> <!-- td inherits th width --> 
     </tr> 
    </tbody> 
</table> 

CSS

table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; } 

.short-column { background: yellow; width: 15%; } 
.long-column { background: lime; width: 70%; } 

.lite-gray { background: #f2f2f2; } 
.gray { background: #cccccc; } 

Answer 7

Darlo ambos max-width y min-width atributos deben trabajar.

Answer 8

Utilice la propiedad de diseño de tabla y el valor "fijo" en su tabla.

table { 
    table-layout: fixed; 
    width: 300px; /* your desired width */ 
} 

Después de configurar todo el ancho de la tabla, ahora se puede configurar el ancho en% de la TD de.

td:nth-child(1), td:nth-child(2) { 
    width: 15%; 
} 

Usted puede aprender más acerca de en este enlace: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 9

tuve problemas con no ser capaz de tamaño de las columnas en una tabla table-layout: fixed que estaba usando un colspan. Para el beneficio de cualquier persona que experimenta una variante de ese problema por el que la sugerencia anterior no funciona, colgroup trabajó para mí (variante de código de OP):

div { 
 
    margin: 22px 0 0 0; 
 
    padding: 30px 30px 15px 30px; 
 
    border: solid 1px #AAAAAA; 
 
    background-color: #fff; 
 
    margin-bottom: 30px; 
 
    margin-left: 10px; 
 
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */ 
 
    float: left; 
 
    /*width: 1020px;*/ 
 
    min-width:1020px; 
 
    display: block; 
 
    overflow: visible; 
 
    z-index: 0; 
 
} 
 
td.longColumn { 
 
    width: 300px; 
 
} 
 
table { 
 
    border: 1px solid; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
td, tr { 
 
    border: 1px solid; 
 
}

<div> 
 
    <table> 
 
     <colgroup> 
 
      <col class='longColumn' /> 
 
      <col class='longColumn' /> 
 
      <col class='longColumn' /> 
 
      <col/> 
 
      <col/> 
 
      <col/> 
 
      <col/> 
 
     </colgroup> 
 
     <tbody> 
 
     <tr> 
 
      <td colspan="7">Stuff</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Long Column</td> 
 
      <td>Long Column</td> 
 
      <td>Long Column</td> 
 
      <td>Short</td> 
 
      <td>Short</td> 
 
      <td>Short</td> 
 
      <td>Short</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>