Kolumny tabeli, ustawianie zarówno minimalnej, jak i maksymalnej szerokości za pomocą css

Question

Kolumny tabeli, ustawianie zarówno minimalnej, jak i maksymalnej szerokości za pomocą css

Chciałbym mieć tabelę, która w kolumnach może się rozciągać, ale mam mały problem z minimalną i maksymalną szerokością w css.

Wydaje się również, że istnieje kilka sprzecznych odpowiedzi wokół tego, jak to działa:

min/max szerokość powinna działać: zapobiega nakładaniu się tekstu na tabelę td szerokość
min / max szerokość są nieobsługiwane: Min-szerokość i max-wysokość dla atrybutów tabeli

Chciałbym mieć następujące

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

Na istnieje sposób na osiągnięcie tego bez javascript (tj. ograniczone rozciąganie kolumn z tabelą)?

potrzebuję tego tylko do pracy z CSS3 + HTML5
jsfiddle z rzeczami nie rozwijającymi się: http://jsfiddle.net/4b3RZ/10 /
jeśli ustawiam tylko min-szerokość na kolumnach, otrzymuję proporcjonalny odcinek: http://jsfiddle.net/4b3RZ/8 /

Poniżej znajduje się tabela tego, co jest renderowane dla różnych konfiguracji css:

Tutaj wpisz opis obrazka

45

css html5 html-table css3

Author: Community, 2013-08-22

Source

1 answers

score 76 · Accepted Answer

Tabele działają inaczej; czasami przeciwnie-intuicyjnie.

Rozwiązaniem jest użycie width na komórkach tabeli zamiast max-width.

Chociaż może się wydawać, że w takim przypadku komórki nie kurczą się poniżej podanej szerokości, to tak naprawdę.
bez ograniczeń dla c, Jeśli podasz tabelę o szerokości 70px, szerokości a, b I c będą wyświetlane jako odpowiednio 16, 42 i 12 pikseli.
Przy szerokości tabeli 400 pikseli zachowują się tak, jak mówisz, czego oczekujesz w swojej siatce powyżej.
Tylko wtedy, gdy spróbujesz nadać tabeli zbyt mały rozmiar (mniejszy niż a.min+b.min+zawartość C), zawiedzie: wtedy sama tabela będzie szersza niż określona.

Zrobiłem fragment bazujący na Twoich skrzypcach, w którym usunąłem wszystkie obramowania, obramowania i odstępy między obramowaniami, abyś mógł dokładniej mierzyć szerokości.

table {
  width: 70px;
}

table, tbody, tr, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}

.a, .c {
  background-color: red;
}

.b {
  background-color: #F77;
}

.a {
  min-width: 10px;
  width: 20px;
  max-width: 20px;
}

.b {
  min-width: 40px;
  width: 45px;
  max-width: 45px;
}

.c {}

<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
</table>