I have two rows inside of a container table. Row 1, and Row 2.
I have a simple two column layout, using tables, where each row has two columns.
As an aside, the columns are implemented differently, and the media queries that would allow the columns in row 1 to stack have been removed.
So, 2 rows each with two columns.
Row 1 is my problem row. Row 2 is my stacking row.
The columns on row 2 only, should stack on smaller screens.
The tables in row 2 are declared as inline-block so they can sit next to each other.
Under certain conditions, the tables in row 2 refuse to stack on narrower screens. I narrowed it down to the padding on two table data tags inside of Row 1, my problem row.
When the two table data tags in the problem row have a combined padding of 27px or below, the nested tables in the stacking row (row 2) will stack on small screens (and specifically at a width of 604 pixels).
However if I change the padding on the two table data tags to a combined padding of 28px or more, the tables in the stacking row will no longer stack on small screens.
<body>
<center style="width: 100%;">
<div style="max-width: 650px;">
<table style="width: 100%;">
<!--Begin Problem Row-->
<tr>
<td>
<table style="width: 100%;">
<tr>
<!-- problem cell 1:
When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my "stacking row"
refuse to stack. Otherwise, they stack fine.
-->
<td style="padding: 13px; width: 50%">
<table>
<tr>
<td style="text-align: center;">
<p>Title</p>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
<p>Random Text</p>
</td>
</tr>
</table>
</td>
<!-- problem cell 2:
When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my "stacking row"
refuse to stack. Otherwise, they stack fine.
-->
<td style="padding: 15px; width: 50%">
<table>
<tr>
<td style="text-align: center;">
<p>Title</p>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
<p>Random Text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--Begin stacking row-->
<tr>
<td>
<table width="100%;">
<tr>
<td style="text-align: center;">
<!--These tables should stack -->
<table style="display: inline-block; width: 100%; vertical-align: top; max-width: 300px;">
<tr>
<td>
<table >
<tr>
<td>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
</td>
</tr>
<tr>
<td>
<p>Title</p>
</td>
</tr>
<tr>
<td>
<p>This is a description of a product that you can use to describe the products that you need to describe</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--These tables should stack -->
<table style="display: inline-block; width: 100%; vertical-align: top; max-width: 300px;">
<tr>
<td>
<table >
<tr>
<td>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
</td>
</tr>
<tr>
<td>
<p>Title</p>
</td>
</tr>
<tr>
<td>
<p>This is a description of a product that you can use to describe the products that you need to describe</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
In my internal stylesheet, the padding on all td's is set to 0 and the border spacing on all tables is set to 0.
I've included my entire stylesheet since it's fairly small.
/* General Resets
The following resets will eliminate all default margin, padding and border for all
clients. The capital M in Margin on the body reset is recommended for Outlook. Also, we will give
the area outside our email frame a neutral background color.
*/
body, .body {
Margin: 0;
padding: 0;
background-color: #f6f9fc;
}
.backHover:hover{
background-color: #ffffff !important;
}
table {
border-spacing: 0;
background-color: black;
}
.centering {
width: 100%;
table-layout: fixed;
background-color: #f6f9fc;
padding-bottom: 40px;
}
td {
padding: 0;
background-color: aqua;
}
img {
border: 0;
}
p {
margin: 0;
}
a {
text-decoration: none;
}
table, td, div, h1, p {font-family: Arial, sans-serif;}
</style>
I don't know why this behavior is happening.
The problem stems from the max-width: 300px on your second row. Your initial row is adding up to 606px in width ((275 * 2) + (13 * 2) + (15 * 2)) while the max width of the second row is 600px (300 + 300) so it won't ever stack.
I'm not sure what your intended finished email is supposed to look like, but there's some alignment issues between the images in the two columns. I would start using a framework (like DML or Foundation for Eamils) or a pre-built template and modify that. That way you're not debugging email client issues on top of manually aligning tables.
Related
I'm struggling to set custom widths of div elements inside a table cell. Various questions (e.g.) talk about position and display parameters, and I've tried too many variation to describe without success. I'd greatly appreciate it if someone could either assist to get this minimal example working, or refer me to a specific previous answer that does actually solve this problem. Thanks in advance.
In the example I want to set the divs as horizontal bars to reflect the values. The table is fixed with and all div ancestors set to width: 100%.
.bar-column {
width: 100%;
}
.bar {
/* some other tested parameters.. */
/* position: absolute; */
/* display: block; float: left; */
/* display: table-cell; */
position: relative;
display: inline-block;
height: 100%;
background-color: yellow;
}
tr { width: 100%; }
<table width="600px" style="background-color: #ddd;">
<tr>
<th>Value</th>
<th class="bar-column">Name and bar</th>
</tr>
<tr>
<td>20</td>
<td class="bar-column">
<div width="50%" class="bar"><a class="link" href="#">twenty</a></div>
</td>
</tr>
<tr>
<td>40</td>
<td class="bar-column">
<div width="100%" class="bar"><a class="link" href="#">forty</a></div>
</td>
</tr>
<tr>
<td>10</td>
<td class="bar-column">
<div width="25%" class="bar"><a class="link" href="#">ten</a></div>
</td>
</tr>
</table>
The problem is using width="100%" for div when you need to use style="width:100%"
So for following line:
<div width="100%" class="bar"><a class="link" href="#">twenty</a></div>
Should be:
<div style="width:100%" class="bar"><a class="link" href="#">twenty</a></div>
Apply that for lines for the div containing 50% and 25%
I want to display a vertical text on the header of a table; the header has a fixed height. And I want to hidden the overflow too.
My html is:
<table border='1px solid black'>
<thead>
<tr style='font-weight:bold; color:blue'>
<td width="60"> Data </td>
<td width="35"> Voto </td>
<td width="50"> Tipo </td>
<td width="10"> I </td>
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;overflow:hidden;"> Hi everybody </div>
</span>
</th>
<td> Annotazioni </td>
</tr>
</thead>
</table>
And my CSS:
table
{
border-collapse:collapse;
table-layout: fixed;
width: 400px;
}
th span {
writing-mode: tb-rl;
filter: flipv fliph;
-webkit-transform:rotate(-90deg);
white-space:nowrap;
display:block;
}
I have a problem: it appears only a couple of letters of the vertical text. Why?
Here you can see better: Example
Thank you very much for your help!
This seems like a strange layout for a table, and I'm not sure of the use case. Therefore, I'm not sure how flexible it needs to be, but adding this to th span fixes your example:
width: 200px;
text-align: center;
margin-left: -90px;
Also, add vertical-align: middle; to its containing th.
http://jsfiddle.net/m7nfU/22/
Remove overflow: hidden on the div encasing "Hi Everybody" which is hiding the rest of the letters.
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;">Hi everybody</div>
</span>
</th>
Then add, vertical-align: middle to the parent <th>, I further had to add a negative margin to make "Hi Everybody" to match the centre, as the text string started from the centre origin.
Fiddle: http://jsfiddle.net/m7nfU/24/
I have created nested tables with the following markup, where the first table contains an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
In Firefox this renders like this:
but in IE6 it renders like this:
Two things are going wrong in IE:
The right hand border is missing from every table.
The 2nd and 3rd tables in the right hand column have arbitrary sizes for the last column despite the fact that these cells are class "image" and should have a fixed width of 75px.
Any advice is greatly appreciated.
EDIT: #rightColumn table, #leftColumn table { width: 100%; background: Red }
Check whether IE is rendering your page is in quirks mode or not. Quirks mode often affects element widths in particular, so I would suggest that this is a very strong candidate for the cause of your problem.
You should make sure the page is in standards mode in order to render correctly.
This is easily done by making sure the page has a valid doctype at the top of the page.
If you don't have a doctype, you can add any valid doctype to get it working in standards mode, but if you're not sure which one to use, just use the following:
<!DOCTYPE html>
Hope that helps.
So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.
I have a div in the html and after the Div and I have another div which contains the HTml table Which is coming on the top of div. How to bring the table down.
<div id='testupdate2' >Mynumber: ". $num." </div>
<div id="test">
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tbody>
<tr>
<td id="Header" class="navUPD">MY number</td>
</tr>
<tr>
<td id="tls" class="navUPD">MY DETAILS </td>
</tr>
<tr>
<td id="mgmnt" class="navOFFTDUPD"> ADDR. MGMT </td>
</tr>
</tbody>
</table>
</div>
How to bring the table down to the DIV?
To push your table off the top of your <div id="test"> you can use CSS padding:
#test {
padding-top: 20px;
}
Or alternatively:
#test table {
padding-top: 20px;
}
If you have something else in <div id="test"> except that table and you want to table be always aligned to bottom of the div, you can do something like this in your CSS
#id{
position: relative;
}
#id table{
position: absolute; /*this is absolute to #id not to body tag*/
bottom: 0px;
left: 0px;
}
This should do the job, I think (I didn't check it).