Come evitare che una tabella da contrazione in una finestra

Question

Ho il seguente codice:

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>

Quando ho tratto il browser in modo che viewport è inferiore a 900px, le righe della tabella sono rimpiccioliti a entrare nella finestra nonostante io abbia impostato la larghezza esplicitamente. Come posso prevenire questo comportamento?

Answer 1

sono riuscito a trovare la risposta me stesso:

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: Risposta modificata.

Ciao,

check this out, sarà dinamicamente (ish) impostare la larghezza della tabella

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); 
})(); 

È necessario inserire manualmente la larghezza del TD, perché Non riesco a capire come si possa ottenere lo stile CSS dal foglio di stile.

Qualcosa come this potrebbe aiutarti se vuoi che tutto sia dinamico, ma questa soluzione sembra funzionare bene. L'ho analizzato molto, ma si potrebbe fare tutto in una riga, con una variabile tdWidth.

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

Answer 3

Write questo table-layout:fixed;

Answer 4

inserire un'immagine in ogni colonna per forzare le dimensioni della cella;

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