Как сделать так, чтобы HTML-таблица была размером ровно 36 пикселей от правого края окна

#html #css #css-tables

#HTML #css #css-таблицы

Вопрос:

Это, по-видимому, невозможно ни с помощью CSS, ни без него — я хочу, чтобы таблица имела размер ровно 36 пикселей как с левой, так и с правой стороны окна браузера. Я могу легко установить левое поле, но, похоже, невозможно установить точное правое поле (css с правым полем, похоже, полностью игнорируется и усугубляется настройками с левым полем).

Ни проценты, ни фиксированная ширина не подходят для моего сценария.

Я что-то упускаю?

1. Попробуйте опубликовать свой HTML и CSS? Пример? Единственное, о чем я могу думать, это то, что ваша таблица имеет размер ровно в 20 пикселей, что на много больше, чем справа, потому что по умолчанию поле в теле составляет 10 пикселей по всему периметру, но кто на самом деле знает.

Ответ №1:

 div.tablecontainer {
  padding: 36px;
}
.tablecontainer table {
  width: 100%;
}

<div class="tablecontainer">
  <table>....</table>
</div>

http://jsfiddle.net/GolezTrol/3UBK3/

1. Хорошо, если я использую отступы, а не поля в css, это, похоже, в основном работает. Когда вы сужаете окно настолько, что другие элементы заставляют его прокручиваться, оно, похоже, разрушается. Но это приемлемый компромисс. Я не могу официально ответить, потому что еще не прошло 7 часов.

Ответ №2:

Другой метод — с абсолютной позицией (GolezTrol опередил меня в этом: P)

ДЕМОНСТРАЦИЯ

 div.wrapper
{
    position:absolute;
    left:136px;
    right:136px;
}


table
{
    width:100%;
}

1. Недостатком является то, что это выводит div из потока документов. Это может быть удобно, но, вероятно, нежелательно в данном случае.

2. @GolezTrol Верно, но, учитывая, что OP хотел, чтобы таблица находилась на расстоянии x пикселов от краев экрана, я (хотя, вероятно, и неправильно) предположил, что таблица будет не в потоке.

Ответ №3:

Вы также могли бы сделать это, используя функцию width в jquery в окне, а затем явно задать ширину таблицы в javascript / jquery. Это позволило бы вам вести себя по-разному в зависимости от размера окна, если это необходимо.

 $("#table").width($(window).width()-(2*36));

1. Вы можете изменить поведение, добавив классы или загрузив другую таблицу стилей. Вы создаете сильную зависимость от Javascript и jQuery, которые не нужны. Я бы не советовал использовать это решение, если только вы не создаете очень динамичный макет страницы.