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

375
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%;

READ ALSO
Выровнять &lt;div&gt; по вертикали
HTML

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

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

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

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

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

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

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

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

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

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

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

 333