I'm trying to design HTML emails and therefore getting a better grip around HTML tables.
I'm currently trying to create a layout with two nested tables that should be inline. The container is 600px
and the nested tables are 300px
each. When reducing the width of the nested tables to 290px
, the inlining works but I'd like to have it pixel perfect.
I tried to get rid of all the borders but I'm suspecting there is still a border attribute somewhere making the container smaller or the elements bigger than their specified width.
I'd love some help.
body {
max-width: 600px;
}
table {
border-spacing: 0;
border-collapse: collapse;
background: blue;
border: none;
}
.column {
display: inline-block;
width: 100%;
max-width: 300px;
background: red;
}
<table width="100%" class="frame">
<tr>
<td>
<table class="column">
<tr>
<td>
Content I
</td>
</tr>
</table>
<table class="column">
<tr>
<td>
Content II
</td>
</tr>
</table>
</td>
</tr>
</table>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
When working with inline there are automatic spaces between elements. See How do I remove the space between inline/inline-block elements?.
You can avoid them by setting the font-size
to 0 on your wrapper and re-assign it on your inner elements. Also reset the padding
. I added the "row" class and put those styles on it, see the snippet below.
body {
max-width: 600px;
}
table {
border-spacing: 0;
border-collapse: collapse;
background: blue;
border: none;
}
.row {
font-size: 0;
padding: 0;
}
.column {
display: inline-block;
width: 100%;
max-width: 300px;
background: red;
font-size: 16px;
}
<body>
<table width="100%" class="frame">
<tr>
<td class="row">
<table class="column">
<tr>
<td>
Content I
</td>
</tr>
</table>
<table class="column">
<tr>
<td>
Content II
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
If it's possible I think the best approach would be using flex
display on the tables' parent.
body {
max-width: 600px;
}
table {
border-spacing: 0;
border-collapse: collapse;
background: blue;
border: none;
}
.column-container {
display: flex;
}
.column {
width: 100%;
max-width: 300px;
background: red;
}
<table width="100%" class="frame">
<tr>
<td class="column-container">
<table class="column">
<tr>
<td>
Content I
</td>
</tr>
</table>
<table class="column">
<tr>
<td>
Content II
</td>
</tr>
</table>
</td>
</tr>
</table>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
font-size: 0
is a good hack, but it forces you to remember about resetting font-size
on children. It can be easy to forget and results with "disappearing text".