Как ограничить ширину таблицы HTML 95% от ширины экрана?

Как ограничить ширину таблицы HTML до 95% ширины экрана?

Я использую

<style type="text/css">
table {
  max-width:95%;
  border-collapse:collapse;
  ...
}
...

но результирующая HTML-страница имеет таблицу шире ширины экрана (Экран 1440x900), а внизу страницы появляется полоса прокрутки.

3 ответов


стиль

width: 95%;

вместо. Кроме того, в зависимости от вашего намерения, рассмотрите стиль

width: 100%;
margin-left: 10px;
margin-right: 10px;

для лучшего макета. Я только предполагаю здесь, но кажется хорошей идеей сделать расстояние между столом и краем окна фиксированным. В противном случае поле будет динамически изменяться при изменении размера.


max-width не может быть применен к тегу таблицы. Вместо этого используйте width.

<table>
<tr>
    <td>test</td>
</tr>
</table>​

table {
  width:95%;
  border-collapse:collapse;
}

td {background:red;}

http://jsfiddle.net/2wH8S/

есть обходные пути для применения эффекта максимальной ширины, сделайте google на "таблице css max-width".


добавив в Konrad Viltersten, я бы установил ширину 95%, но вместо использования поля слева и справа от 10px я бы использовал:

margin-left: 2.5%;
margin-right: 2.5%;

Это должно устранить любые проблемы позиционирования при изменении размера окна браузера.