Как сделать корректный отступ слева и справа у таблицы с width=100%?

268

28 июля 2017, 00:02

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  width:10cm; 
  max-width:100%; 
  margin:auto; 
} 
.line { 
  background-color:#77AAFF; 
} 
table { 
  width:100%; 
  background-color:#CCCCCC; 
  margin-left:0.25cm; 
  margin-right:0.25cm; 
} 
</style> 
</head> 
<body> 
  <div class="line">Div имеет длину 100%, чётко умещается между границами</div> 
  <table cellpadding="0"> 
    <tr> 
       <td>Таблица немного сдвинута вправо, выходит за границу</td> 
    </tr> 
  </table> 
</body> 
</html>

Answer 1

Первый способ

Обернуть таблицу в div и задать ему необходимый margin:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  width:10cm; 
  max-width:100%; 
  margin:auto; 
} 
.line { 
  background-color:#77AAFF; 
} 
.wrapper { 
  margin-left:0.25cm; 
  margin-right:0.25cm; 
} 
table { 
  width:100%; 
  background-color:#CCCCCC; 
} 
</style> 
</head> 
<body> 
  <div class="line">Div имеет длину 100%, чётко умещается между границами</div> 
  <div class="wrapper"> 
    <table cellpadding="0"> 
      <tr> 
         <td>Теперь таблица тоже умещается между границами и имеет необходимые отступы</td> 
      </tr> 
    </table> 
  </div> 
</body> 
</html>

Второй способ

Использовать calc():

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  width:10cm; 
  max-width:100%; 
  margin:auto; 
} 
.line { 
  background-color:#77AAFF; 
} 
table { 
  margin:auto; 
  width:calc(100% - 0.5cm); 
  background-color:#CCCCCC; 
} 
</style> 
</head> 
<body> 
  <div class="line">Div имеет длину 100%, чётко умещается между границами</div> 
  <table cellpadding="0"> 
    <tr> 
       <td>Теперь таблица тоже умещается между границами и имеет необходимые отступы</td> 
    </tr> 
  </table> 
</body> 
</html>

Answer 2

Замени у таблицы width:100%; на max-width:100%;

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выровнять <div> по вертикали

Есть блок с длинным текстом и такими параметрами:

269

HTML

Slider на JS, изменение градиента по указанным значениям

Всем снова привет! Переписал код для слайдера, но теперь не могу допереть, как сделать градиент между цветами #e8e8e8 и #445994 при движении ползункаКто-нибудь...

273

HTML

не верный вывод в DOM jquery

Вот пример моего кода:

271

HTML

Как в Bootstrap добавить пару px к сетке?

Использую bootstrapСоздал левое меню и задал ему

245