Как мне получить таблицу Html для оценки полей, когда ее ширина установлена ​​равной 100%?

Question

Я изо всех сил пытаюсь получить таблицу Html, чтобы заполнить ширину контейнера и уважать поля без переполнения.

Этот образец (см. https://jsfiddle.net/v6o12u9o/) устанавливает ширину таблицы до 100%, но из-за поля таблица переполняет границы своего родителя. Как это исправить?

Html:

<div style="border: 1px solid red; margin:10px;"> 
<table border=1> 
    <tr> 
     <td> 
      First cell. 
     </td> 
     <td> 
      Second cell. 
     </td> 
    </tr> 
</table> 
</div> 

Css:

table { 
    margin: 20px; 
    background-color: yellow; 
    width:100%; 
} 

td { 
    width: 50%; 
} 

Некоторые другие вещи, которые я пробовал:

• Установка Маржа правом на 40px. Маржа-право игнорируется.
• Настройка вместо прокладки справа. Это делает ячейки меньше, но таблица остается на 100% ширины.
• Настройка отображения таблицы на «блок». Это делает стол правильный размер, но затем клетки слишком малы (я пытался не установить «блок» на клетках, не повезло)

Answer 1

Если вы хотите стол, чтобы быть 100% вы можете сделать это и компенсировать полях слева и справа, сдвинув, что обивка на родителе:

CSS:

.tableElement { 
    margin: 20px auto; 
    background-color: yellow; 
    width: 100%; 
} 

.tableCell { 
    width: 50%; 
} 

.tableWrapper { 
    border: 1px solid red; 
    margin: 10px; 
    padding: 0 20px; 
} 

HTML:

<div class="tableWrapper"> 
    <table class="tableElement" border="1"> 
     <tr> 
      <td class="tableCell">First cell.</td> 
      <td>Second cell.</td> 
     </tr> 
    </table> 
</div> 

Fiddle: https://jsfiddle.net/v6o12u9o/5/

Answer 2

Если вы установите width: 100% и margin: 20px ребенок будет переполнение. Попробуйте установить границу только сверху и снизу и ограничивая width до 90%. Это приведет к тому же в вашем примере.

Поскольку margin-left и margin-right установлены в auto, он также будет находиться внутри родителя.

table { 
     margin: 20px auto 20px auto; 
     background-color: yellow; 
     width: 90%; 
    } 

Answer 3

Вы можете попробовать это, если хотите, чтобы оно было шире, вы можете изменить ширину в стиле стола. Надеюсь, это то, что вы ищете.

table { 
    margin-top:10px; 
    margin-bottom:10px; 
    margin-right:auto; 
    margin-left:auto; 
    background-color: yellow; 
    width:95%; 
} 

Answer 4

Самый простой способ сделать это - режим отображения для этого элемента. что заставляет элементы быть более текучими.

.table { 
    display:block; 
    margin:20px auto; 
} 

настройки таблиц отображения, чтобы блокировать сделает его заполнить пространство, которое он имеет в своем распоряжении, а остальное вы можете сделать с помощью CSS для цвета и стиля.

Answer 5

Вот что я думаю, что вы хотите: https://jsfiddle.net/v6o12u9o/4/

//uses padding instead of margin 
div { 
border: 1px solid red; 
} 

table { 
padding: 20px; 
width:100%; 

} 

tr { 
background-color: yellow; 

} 

td { 
width:50%; 
} 

Answer 6

Нагрузки ответов, но я думал, что я мое решение также. Я изменил CSS на тот, что вместо таблицы с запасом, у обертки div была добавка, а таблица была установлена ​​на 100%.

div { 
    padding: 10px;  
} 
table { 
    background-color: yellow; 
    width:100%; 
} 
tr { 
    width: 100%; 
}