Существует ли объявление CSS, эквивалентное & # 8220; width: auto & # 8221; для < таблицы > элементы?

StackOverflow https://stackoverflow.com/questions/1625999

  •  06-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь создать таблицу < > это не превышает определенной ширины (скажем, 500px), даже с границами любого размера.

Обычно, если я это сделаю:

(HTML) 

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

(CSS) 

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

Я собираюсь закончить с < таблицей > ширина 510 пикселей, так как половина левой и правой границ будет находиться снаружи тега < div > ;. Я хочу < table > всего шириной 500px (то есть не превышает ширину родительского элемента / контейнера). Таким образом, каждая левая и правая границы будут иметь ширину 10 пикселей и размещаться внутри шириной 500 пикселей, содержащей < div > - следовательно, оставшаяся область содержимого таблицы будет 480px.

Я легко могу сделать это с < div > с помощью CSS-объявления " ширина: авто. " Я могу подделать его с помощью таблицы, добавив дополнительный тег < div > вокруг него, который использует "ширину: авто" с границей, установленной на этом < div > ;, а не на < table >.

Однако я надеюсь, что существует более элегантное решение (должно быть кросс-браузерное). Есть ли тот, о котором я не знаю?

Это было полезно?

Решение

Установите div в ширину 480px и поместите на него границу 10px. Затем установите таблицу на 100% ширины

Другие советы

Не уверен, что это сработает, но ... не могли бы вы ограничить первый (левый край) и последний (правый край) TD (или, возможно, TR) вместо самой таблицы? Это должно дать тот же визуальный результат.

В противном случае я бы не стал много спать из-за оболочки DIV.

Я не знаю, есть ли кросс-браузерное решение. Блочная модель IE на самом деле работает так, как вы хотели бы: как только вы объявляете ширину элемента, это ширина, а затем она вычитается из " inner " ширина элемента поля отступа и границы, чтобы дать вам объявленную ширину.

Все остальные браузеры делают противоположное: они устанавливают ширину элемента на объявленную ширину, а затем добавляют отступы полей и рамку.

Я только что протестировал ваш код в IE7 и Firefox 3.5, и оба имеют ширину 500 пикселей даже с черной рамкой 10 пикселей. Я беспокоюсь о старых версиях Firefox.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top