Jak ustawić maksymalną szerokość komórki tabeli za pomocą wartości procentowych?

100 
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Powyższe nie działa. Jak ustawić maksymalną szerokość komórki tabeli za pomocą wartości procentowych?

html css html-table Leo Jiang
źródło
Proszę rozwinąć „nie działa” .
Sparky
1
Musisz upewnić się, że RODZICT twojego td ma określoną szerokość (czy to, że przekazujesz szerokość: 100%; całą drogę od ciała do twojego td, lub możesz dać rodzicowi (tutaj: tr) 1000px lub cokolwiek wolisz . Używając %% w css, zawsze używa dokładnie piksela zdefiniowanego w rodzicu, a następnie przekształca piksel w %% dla dzieci, ponieważ mają one rozmiar w stosunku do ich rodzica.
Philipp Meissner
Dla przypomnienia, maksymalna szerokość działa teraz w Safari i Chrome. Nie jestem pewien, od jak dawna jest obsługiwany.
Jacob

Odpowiedzi:

71

Zgodnie z definicją max-width w specyfikacji CSS 2.1, „wpływ„ min-width ”i„ max-width ”na tabele, tabele wbudowane, komórki tabel, kolumny tabel i grupy kolumn jest nieokreślony.” Więc nie możesz bezpośrednio ustawić max-width w elemencie td.

Jeśli chcesz, aby druga kolumna zajmowała najwyżej 67%, możesz ustawić szerokość (która jest w efekcie minimalną szerokością dla komórek tabeli) na 33%, np. W przykładzie

td:first-child { width: 33% ;}

Ustawienie tego dla obu kolumn nie zadziała zbyt dobrze, ponieważ zwykle powoduje, że przeglądarki nadają kolumnom równą szerokość.

Jukka K. Korpela
źródło
Właściwie maksymalna szerokość działa teraz w Safari i Chrome. Nie jestem pewien, od jak dawna jest obsługiwany.
Jacob
114

Stare pytanie, które znam, ale jest to teraz możliwe przy użyciu właściwości css table-layout: fixedw tagu tabeli. Odpowiedź poniżej na to pytanie Procentowa szerokość CSS i przepełnienie tekstu w komórce tabeli

Można to łatwo zrobić za pomocą table-layout: fixed, ale jest to trochę skomplikowane, ponieważ niewiele osób wie o tej właściwości CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Zobacz to w akcji na zaktualizowanych skrzypcach tutaj: http://jsfiddle.net/Fm5bM/4/

superphonic
źródło
2
Dzięki! Obawiałem się, że naprawiony oznacza, że ​​nie przeliczy szerokości komórek, które nie mają ustawionej szerokości, ale na szczęście tak nie jest.
fassl
4
W twoim jsfiddle, jeśli usunę właściwości szerokości, maksymalna szerokość nadal nie działa, więc nie jestem pewien, jak to rozwiązuje problem.
frezq
4
@superphonic Myślę, że jesteś zdezorientowany. Jeśli usuniesz max-widthw tym jsfiddle, szerokość pozostanie taka sama, więc to nie jest to, max-widthco ją ustawia. Może to być bardziej zrozumiałe, jeśli zastąpisz go jako max-width: 10%pierwszy td... zobaczysz, że się nie zmienia. jsfiddle.net/w3f8ey22/1
frezq
4
table-layout: fixed nie rozwiązuje problemu z OP. Nie powoduje magicznego działania „min-width” w komórce tabeli. Oba przywoływane skrzypce nie mają różnicy w wyświetlaniu, jeśli usunięto table-layout: fixed.
cmerriman
2
ta odpowiedź jest myląca, ponieważ nie jest związana z pytaniem
Zoltán Süle
8

Wiem, że to dosłownie rok później, ale pomyślałem, że się tym podzielę. Próbowałem zrobić to samo i znalazłem to rozwiązanie, które działało dla mnie. Ustawiliśmy maksymalną szerokość dla całego stołu, a następnie pracowaliśmy z rozmiarami komórek, aby uzyskać pożądany efekt.

Umieść tabelę we własnym elemencie div, a następnie ustaw szerokość, minimalną szerokość i / lub maksymalną szerokość elementu div zgodnie z potrzebami dla całej tabeli. Następnie możesz pracować i ustawić szerokość i minimalną szerokość dla innych komórek oraz maksymalną szerokość elementu div, efektywnie pracującego dookoła i do tyłu, aby osiągnąć maksymalną szerokość, jaką chcieliśmy.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Następnie w swoich stylach umieść:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Wprawdzie nie daje to „maksymalnej” szerokości komórki jako takiej, ale pozwala na pewną kontrolę, która może działać zamiast takiej opcji. Nie jestem pewien, czy będzie działać na Twoje potrzeby. Wiem, że zadziałało w naszej sytuacji, w której chcemy, aby strona nawigacji na stronie była skalowana w górę iw dół do pewnego punktu, ale w dzisiejszych czasach na wszystkich szerokich ekranach.

Damon
źródło
0

procent powinien odnosić się do wielkości bezwzględnej, spróbuj tego:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>
dov.amir
źródło