Ширина CSS: автоматическое поведение с вложенными таблицами ⇐ CSS

[Anonymous]

Я новичок в HTML, но пытаюсь разобраться с чем-то, что кажется мне довольно простым. Мне нужно создать HTML-код, который будет использоваться в качестве основы для шаблона электронного письма. Таким образом, из-за множества соображений для почтовых клиентов с рендерингом HTML я использую таблицы, а не сетки и т. д. Я пытаюсь гарантировать, что вложенные таблицы в элементах TD подчиняются родительским полям и заполнению, но также занимают 100% доступного пространства. в ТД. Я пытаюсь использовать для этого атрибут CSS ширины.
У меня есть следующий код в качестве примера, иллюстрирующего мою проблему. :

Код: Выделить всё

table{
background-color: white;
}

td {
background-color: rgb(179, 228, 247);
border: 2px solid greenblack;
}

.emph{
font-weight: bold;
font-style: italic;
}

.outer{
background-color: rgb(210, 204, 208);
border: 2px solid black;
padding: 5px;
}

.inner{
border: 1px solid red;
background-color: white;
}

.inner1{
width: 100%;
}

.inner2{
width:100%;
margin: 10px;
}

.inner3{
margin: 10px;
width:auto;
}

.innerblock{
display:block;
}





Table 1




Nested Table 1


If immediate parent table has no margin and width=100% then this TD should not overlap  the containing TD element edge








Nested Table 2


If immediate parent table has a margin and width=100% then this TD might overlap the containing TD element edge as the 100% is the size of the parent table of this table without margins








Nested Table 3


If immediate parent table has width=auto then margins and padding should be accounted for and no overlap








Nested Table 4


If immediate parent table has width=auto then margins and padding should be accounted for and no overlap

Итак, Вложенные таблицы 1 и Вложенная таблица 2, как и ожидалось, основана на использовании width:100%, но Вложенная таблица 3 Я хочу, чтобы она заполнила родительский элемент. Пространство TD/ширина по горизонтали (вы можете видеть, что оно уменьшилось до размера текста). Поэтому я добавил display:block; во Вложенную таблицу 4, и это, кажется, работает, но почему?

Подробнее здесь: https://stackoverflow.com/questions/783 ... ted-tables