Cómo evitar que una mesa se encojan en una ventana gráfica

Question

Tengo el siguiente código:

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 0px; 
 
    border: 1px solid #d3d3d3; 
 
    width: 300px; 
 
    height: 100px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
}

<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    <td>I</td> 
 
    </tr> 
 
</table>

cuando extienda el navegador de manera que la ventana gráfica es inferior a 900px, las filas de la tabla se shrinked a encajar en la ventana gráfica a pesar de que establecí el ancho explícitamente. ¿Cómo puedo prevenir este comportamiento?

Answer 1

he conseguido encontrar la respuesta a mí mismo:

td { 
    padding: 0px; 
    border: 1px solid #d3d3d3; 
    min-width: 300px; 
    max-width: 300px; 
    width: 300px; 
    height: 100px; 
    text-align: center; 
    white-space: nowrap; 
} 

Answer 2

e: Respuesta modificada.

Hola,

mira esto, será de forma dinámica (más o menos) ajustar el ancho de la tabla

http://jsfiddle.net/joshuamartin/KtAny/

(function() { 
    var tdWidth = '300'; 


    var columnCount = $("#tID").find('tr')[0].cells.length; 
    var tableWidth = tdWidth * columnCount; 

    $("table#tID").attr('width', tableWidth); 

    // console.log(tableWidth); 
})(); 

Tienes que introducir manualmente el ancho de su td lo es, porque No puedo entender cómo puedes obtener el estilo CSS de la hoja de estilo.

Algo como this podría serle útil si lo quiere todo para que sea dinámico, pero esta solución parece funcionar bien. Lo he desglosado bastante, pero puedes hacerlo todo en una sola línea, con solo una variable tdWidth.

(function() { 
    var tdWidth = '300';  
    $("table#tID").attr('width', $("#tID").find('tr')[0].cells.length * tdWidth); 
})(); 
​ 

Answer 3

escribir este table-layout:fixed;

Answer 4

insertar una imagen en cada columna para forzar el tamaño de la celda;

<img src="blank.gif" width="300" height="1" border="0" alt="">