Jak zapobiegać tabelę z kurczących się rzutni

Question

Mam następujący kod:

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>

Kiedy wyciągnę przeglądarkę tak, że rzutnia jest mniejszy niż 900px, wiersze tabeli są złączowe do dopasować do okna roboczego, mimo że ustawiłem jawnie szerokość. Jak mogę zapobiec temu zachowaniu?

Answer 1

udało mi się znaleźć odpowiedź sam:

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: Zmieniono odpowiedź.

Cześć,

to sprawdzić, to dynamicznie (owski) ustawić szerokość tabeli

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

Trzeba ręcznie wprowadzić do szerokości td, ponieważ Nie wiem, jak można uzyskać styl CSS z arkusza stylów.

Coś takiego jak this może ci pomóc, jeśli chcesz, aby wszystko było dynamiczne, ale to rozwiązanie działa dobrze. Zepsułem to naprawdę całkiem sporo, ale można to wszystko zrobić w jednym wierszu, z tylko zmienną tdWidth.

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

Answer 3

Zapis ten table-layout:fixed;

Answer 4

wstawić obraz do każdej kolumny, aby zmusić wielkości komórek;

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