Столбцы таблицы, устанавливающие минимальную и максимальную ширину с помощью css

Я хотел бы иметь таблицу, которая в столбцах может растягиваться, но у меня небольшая проблема с минимальной и максимальной шириной в css.

Также кажется, что некоторые противоречивые ответы о том, как это работает:

Я хотел бы иметь следующие

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>

Есть ли способ достичь этого без javascript (т.е. ограниченное растяжение столбцов с таблицей)?

  • Мне нужно только это, чтобы работать с CSS3 + HTML5
  • jsfiddle с нерасширяющимися вещами: http://jsfiddle.net/4b3RZ/10/
  • Если я устанавливаю только минимальную ширину в столбцах, я получаю пропорциональное растяжение: http://jsfiddle.net/4b3RZ/8/

Ниже приведена таблица того, что фактически получается для некоторых разных настроек css:

enter image description here

Ответы

Ответ 1

Таблицы работают по-разному; иногда контр-интуитивно.

Решение состоит в использовании width в ячейках таблицы вместо max-width.

Хотя может показаться, что в этом случае ячейки не будут сокращаться ниже заданной ширины, они будут на самом деле.
без ограничений на c, если вы дадите таблице ширину 70 пикселей, ширина a, b и c выйдет как 16, 42 и 12 пикселей соответственно.
При ширине стола 400 пикселей они ведут себя так, как вы говорите, что ожидаете в своей сетке выше.
Только если вы попытаетесь дать таблице слишком маленький размер (меньше, чем a.min + b.min + содержимое C), он не сработает: тогда сама таблица будет более широкой, чем указано.

Я сделал фрагмент, основанный на вашей скрипке, в которой я удалил все границы, paddings и border-spacing, чтобы вы могли более точно измерять ширину.

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>