I have a table that is inside of a div. In responsive mode, the table goes outside of the div area and looks like this:
I am trying to have the table move to center in responsive mode. I want it to look like this:
Currently, when the screen width gets small, the table will not get close enough to the left to fit in the container. I do not want the table to go outside of the container.
Does anyone know how I can accomplish this?
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How about adding
overflow-x: auto;
To the div.inner element. Altough I´m not sure if this is what you want. Your CSS would be something like
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}
I took the liberty of adding a second cell for demostrations sake.
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try the img-responsive class on your images like this:
<!DOCTYPE html>
<html>
<head>
<style>
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: grab;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
</style>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="38">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
</td>
</tr>
<tr>
<td rowspan="48">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
</td>
<td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td rowspan="5">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
</td>
<td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
<td colspan="27">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
</td>
<td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
<td rowspan="48">
<img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I currently have a table setup that holds images in a table of varying sizes and is able to resize the image accordingly. How can I make the image maintain aspect ratio?
/* THIS PART IS FOR PAGE SETUP*/
.page-wrap {
min-height: 100%;
/* equal to footer height */
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
margin: 0;
margin-top: 100px;
}
.site-footer {
border-top: 2px dashed #95a0b7;
margin-left: auto;
margin-right: auto;
}
/* this is styling! */
.post {
color: #843900;
font-family: Calibri;
font-size: 112%;
border: 2px solid #;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10;
}
html,
body {
background-color: #d1d6e0;
height: 100%;
}
/* THIS STUFF IS FOR DESIGN */
table {
width: 100%;
height: 100%;
}
td {
padding-left: 10px;
padding-bottom: 10px;
}
th {
text-align;
left;
}
.postTableBorder {
border-bottom: 1px dashed #95a0b7;
}
.footer {
text-align: center;
color: #843900;
font-family: Calibri;
font-size: 112%;
padding-bottom: 10px;
font-weight: bold;
}
h1 {
color: #843900;
font-family: Calibri;
font-size: 500%;
text-align: center;
margin: 0;
border-bottom: 5px dotted #95a0b7;
}
a {
text-decoration: none;
color: #843900;
text-shadow: 1px 1px 2px #662c00;
}
a:hover {
color: #662c00;
}
.headerP {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
}
.headerPselected {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
border-solid: solid 2px #7684a2;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
box-shadow: -1px -1px 3px #0a0c0f, 1px 1px 3px #47566b;
line-height: 0;
}
.imageTD {
vertical-align: top;
padding-bottom: 10px;
}
h2 {
position: absolute;
bottom: 0px;
left: 10px;
width: 100%;
color: black;
font-family: Calibri;
}
/* COLORS FOR H2*/
.blue {
color: #0033cc;
text-shadow: 1px 1px 1px #002699;
}
.red {
color: #4d0000;
text-shadow: 1px 1px 1px #1a0000;
}
.imageLink:hover {
opacity: 0.66;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<title>Marc</title>
</head>
<body>
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:500px' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:614px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
</body>
</html>
How can I make it so that the images hold a ratio of 4:3 when the window is resized?
Change the <img> heights to auto works.
https://jsfiddle.net/JustusFT/3qtb1r9v/
However, I suggest you use a grid system such as bootstrap rather than using tables.
HTML:
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:auto' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
I want to align table inside div to right side of the div, but they are aligned to left, what is wrong with my css? I have table inside the div, which contains a text and a picture, what I want is to place the table on right hand side use align=right in table. And some tables I would like to align on the left side, how can I align some tables on right side in a page or some tables in left side in the same page? Thanks
<!DOCTYPE html>
<html>
<head>
<title>Landing</title>
<style>
.form-section{
margin:15px;
}
</style>
</head>
<body>
<div class="jumbotron" align="center">
<img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
<h2></h2>
</div>
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<form class="form-horizontal">
<table align="right">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:22
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
<br>
<table align="right">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:21
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
<br>
<style>
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: 50%;
margein:0px
}
.row {
display: flex;
}
td { white-space:pre }
</style>
Please update your code as per this. The problem, .row should have 'col-` as their child as a standard practice.
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: 50%;
margein:0px
}
td { white-space:pre }
.user-table{width:100%;}
.user-table tr > td{
text-align:right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" align="center">
<img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
<h2></h2>
</div>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-12 col-md-12">
<table class="user-table">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:22
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
</div>
<div class="col-sm-12">
<table class="user-table">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:21
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
</div>
</form>
</div>
<div>
I'm trying to set two images in two column in mobile but doesn't work any idea?
Demo here
HTML
<table bgcolor="#ffffff" id="event-info" class="outer-table"
summary="outer-table" valign="top" border="0" cellpadding="0" cellspacing="0" style="background-color:#ffffff; width:100%; max-width:600px; Margin:0 auto" width="100%">
<tr align="center" class="tab1">
<td>
<img src="images/website.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Website</p>
</td>
<td>
<img src="images/mobile.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Mobile</p>
</td>
<td>
<img src="images/marketing.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Marketing</p>
</td>
</tr>
<tr align="center" class="tab2">
<td>
<img src="images/support.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Support</p>
</td>
<td>
<img src="images/management.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Management</p>
</td>
<td>
<img src="images/customer.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Customer</p>
</td>
<tr class="spacer-40" height="40" style="height:55px; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important;">
<td> </td>
</tr>
</tr>
</table>
CSS
#media only screen and (max-width: 769px){
table tr td{
display:block;
}
}
Update based on comment
Since you can't switch a table from a 3 column to a 2 column layout (at least not in a proper way) and half of the email clients doesn't support media queries, I came up with this solution.
Test it thoroughly with email clients as I haven't been able to do that
I added min-width: 100px; to the "tabs" divs which will make it break into 1 column when lack of space. Remove it if you don't want that.
<div style="max-width:600px;margin:0 auto;text-align: center;">
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
</div>
As that can't be done properly using table, here is a flex solution.
.outer {
max-width:600px;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.outer .tab1 {
width: 33%;
text-align: center;
}
.outer img.features {
border:0;
width:30%;
max-width:600px;
}
.outer p.features {
max-width:600px;
font-size: 12px;
padding-top: 10px;
font-weight: 700;
text-align: center;
}
#media only screen and (max-width: 480px){
.outer .tab1 {
width: 50%;
}
}
<div id="event-info" class="outer">
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
</div>
If flex can't be used, use display: inline-block
.outer {
max-width:600px;
margin:0 auto;
}
.outer .tab1 {
display: inline-block;
text-align: center;
width: calc(33% - 4px); /* 4px, see comment below */
}
.outer img.features {
border:0;
width:30%;
max-width:600px;
}
.outer p.features {
max-width:600px;
font-size: 12px;
padding-top: 10px;
font-weight: 700;
text-align: center;
}
#media only screen and (max-width: 480px){
.outer .tab1 {
width: calc(50% - 4px);
}
}
<div id="event-info" class="outer">
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
</div>
Side note:
The 4px used, is to compensate for the white space (the line break between elements in the markup) and is based on font size, so if it increases this value might need to be adjusted.
An alternative is to change the markup from
</div>
<div class="tab1">
to
</div><div class="tab1">
or
</div><!--
--><div class="tab1">
According to what email on acid is showing me I am see this where I have some links and text being centered in an email
But here is what it is supposed to look like, most other email clients are showing this properly
The table that these links are in looks like this
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
I'm using Zurb's ink framework to build this, and here are the css rules I added
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
I'm adding this JSBin link since there is a lot of CSS manipulation happening from the Ink framework
https://jsbin.com/pewoluwapo/edit?html,output
UPDATE:
After trying Gortonington's answer I now get this in outlook
Add the following rule: http://jsfiddle.net/L9grd3ja/. Tables, by default, shrinkwrap their contents.
table {
width: 100%;
}
All email clients have different support just like web browsers, this would suggest outlook doesn't support the center tag.
I would suggest removing the center tag and using a widely supported method instead (align="center"). Also remember to use © instead of the actual symbol as it's not always supported either! See more HTML codes here: http://www.ascii.cl/htmlcodes.htm
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center" align="center">
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a><br/>
<span class="copy">© 2015. All Rights Reserved.</span>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
I think some MSO conditional should solve it for Outlook. You also want to make sure to inline prior to uploading as well (just in case you don't already) to make sure Gmail, etc can read all your CSS.
Below is just MSO conditional and not inlined:
<!doctype html>
<html>
<head>
<style>
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
</style>
</head>
<body>
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<!--[if (mso) | (IE)]></center></td></tr><tr><td><center><![endif]-->
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
</body>
</html>
EDIT: In accordance with your comment, I dug into the JSBin of your email and see that the issue is that the images contain "float: left; clear: both; display: block; " as well as "align='left'" which is causing it to left align in the table. There are two options:
1.) remove this code from the CSS or after inlining
2.) Create a defined width table to hold the social media and copyright info. (This is likely the most cross-client compatible solution)
In order to not change any of your exisitng code or the CSS inserted when inlining Zurb INK - I had to create a table inside the TD at 100% to clear the aligns and blocks/floats that were inherit inside the parent table, I then created another nested table inside that to house the social icons and copyright info. Then inside the top TD of that, I created a third nested table to allow the icons to each have their own TD without causing issues or requiring colspan for the copyright below.
See below for example:(after inlining your code)
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="230" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:5px;">
<span class="copy" style="display: block; margin-top: 6px; font-size: 10px;">© 2015. All Rights Reserved.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following HTML table and there is a couple of problems with it. First the rows in the table are really large, the table row should be just large enough to fit the content inside of it. Second some of the inner divs are out of line with the rest of the divs in the row, in particular the ones that contains words that wrap onto a second line
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
<td rowspan="2" style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>
I figured out the answer. The rowspan is causing the problem and I had to remove the rowspan and use a negative margin on the second row instead.
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px;">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
<td style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>