I have the following code, I would like the cells to collapse when the screen's width is less than a specific figure.
Normally I am used to having problems with IE, but in this case both IE and Firefox work well, it's Chrome which wouldn't react to that I'm trying to do.
Any ideas?
My code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#media screen and (max-width: 432px) {
.dynTd {display: block;}
}
</style>
</head>
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br>
Company Address<br>
Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
</html>
Turning a td into a block while leaving the tr as is will cause the browsers to compensate - according to the Tables specification,
If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
And the td elements with display:block are not 'table-cell's anymore!
Therefore, the browsers create such an anonymous table-cell. And apparently, Chrome does so in a different way than FF and IE.
The solution is to make sure this does not happen; for instance to turn all the elements in the table into blocks so that no anonymous table-cells are needed.
#media screen and (max-width: 432px) {
table, tr, td {display: block;}
}
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br> Company Address<br> Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
This will look the same in all browsers. The you can work towards a way to make it look the way you want again...
Related
I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.
I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.
PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.
For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.
Meanwhile, here is the markup for the main content panel:
<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
<div id="content" class="row" style="margin-left: auto; margin-right: auto;">
<div id="divContMain" runat="server" style="width: auto;">
<asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<center>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
…
</div>
</div>
The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.
I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!
It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:
d-flex justify-content-center
So you can add new css class for h1:
#MainContent_ctl00 > h1 {
text-align: center;
}
and add d-flex justify-content-center styles for div which contains your table:
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped"
id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<!-- The other code is omitted for the brevity -->
</table>
</div>
In addition, text can be aligned through text-align: center inside of <h1>.
An example:
.tableint {
font-size: 15px;
font-family: Estrangelo Edessa, Verdana;
border: Solid 1px #666666;
border-collapse: collapse;
color: Black;
}
.thint {
background-color: #EE8322;
color: Black;
font-weight: bold;
font-size: 14px;
border: solid 1px #666666;
border-collapse: separate;
font-variant: small-caps;
margin-bottom: 5px;
}
.textboxint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 14px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.dropdownint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 12px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.buttonint {
margin: 5px;
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #EE8322;
color: Black;
text-align: center;
border-top-style: groove;
border-left-style: groove;
border-right-color: Black;
border-bottom-color: Black;
height: 22px;
}
.buttonint:hover {
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #FFFFCC;
color: #006699;
margin: 5px;
}
#MainContent_ctl00 > h1 {
text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
<div class="row justify-content-center" id="content"
style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
<!-- <div id="divContMain" style="width: inherit;">may just remove -->
<div id="contentUPanel">
<div id="MainContent_ctl00">
<br>
<h1>Purchasing Requisitions</h1>
<br>
<div>
<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td align="center" class="thint" colspan="2">Filter</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request Start:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request End:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Part Number:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Account:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor No:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor Name:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input class="buttonint" type="submit" value="Search">
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
</tr>
<tr align="center" class="gridview">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr align="center" class="gridview" style="background-color:#FFE1CD;">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src=" index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
UPDATE:
I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:
<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">
<!-- The other code is omitted for the brevity -->
</div>
With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:
<div class="container-fluid mt-5" style="position: absolute;">
<div id="content" class="row" style="display: flex; justify-content: center;">
…
</div>
</div>
Now everything scales and is properly centered!
I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:
and here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body{width: 400px;}
.gutter img p{width: 400px;}
.content{width: 400px;}
.social-connect {width: 100%;}
}
</style>
<body bgcolor="#EEE">
<div class="content">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Any help to fix this issue will be greatly appreciated. Thank you!
There were a few things (I think) was wrong with your HTML.
Body of the mobile device was set to 400px
content was set to 400px
I have added a new class container to change the width of the outer table on mobile devices.
Below is the update code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
.social-connect {width: 100%;}
.container{width:100% !important;}
}
</style>
<body bgcolor="#EEE">
<div class="content container">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
This is my code, but the image is above the table, and I want them side-by-side:
<div style="float:left;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</div>
<div style="float:left;">
<table style="margin-left: 10%; float: top;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</div>
See current and desired output:
I think the issue is that you are using <div> rather than <span> tags. If you must use <div> you could either set the second one to float:right or add to their style - display: inline-block;.
Something like this:
<span style="float:left;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</span>
<span style="float:left;">
<table style="margin-left: 10%; float: left;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</span>
or this:
<div style="float:left;display:inline-block;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</div>
<div style="float:left;display:inline-block;">
<table style="margin-left: 10%; float: left;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</div>
I have the following panel:
And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
There are some classes but I'm not using them by now.
Link to codepen: http://codepen.io/anon/pen/apNrxy
Any suggestion? Thanks!
It's easy to do if you can leverage flexbox (See browser compatibility here).
If you're using Bootstrap version 4, you can just wrap the content with:
<div class="d-flex justify-content-around">...</div>
See the documentation for more information.
If you're using Bootstrap version 3, you can still use the flexbox styles directly:
display: flex;
justify-content: space-around;
Update your CSS to this
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
/* float: left; */
margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
background-color: #cccccc;
}
I have a table with cells that contain one image and one text link each, in that order. I have successfully vertically aligned the image with CSS:
.tdClass img {vertical-align:middle;}
But I can't seem to get the text link underneath it to align to the bottom of the cell. No matter what I've tried, it stays put right underneath the image. The ultimate goal here is to make the cells uniform horizontally as much as possible when my images are different heights.
<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
<td class="tdClass">
<a href="#">
<img src="#">
</a>
<div class="divClass">
TEXT
</div>
</td>
<td class="tdClass">
<a href="#">
<img src="#">
</a>
<div class="divClass">
TEXT
</div>
</td>
</tr>
</tbody>
</table>
Consider adding a uniform height to the links around the images, enough to fit the tallest image.
.img {
height: 50px;
display: table-cell;
vertical-align: middle;
}
<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
<td class="tdClass">
<a href="#" class="img">
<img src="http://placekitten.com/50/50">
</a>
<div class="divClass">
TEXT
</div>
</td>
<td class="tdClass">
<a href="#" class="img">
<img src="http://placekitten.com/30/30">
</a>
<div class="divClass">
TEXT
</div>
</td>
</tr>
</tbody>
</table>
add this :
td{
border: 1px solid red;
height: 350px;
}
td a:first-child,
td .divClass{
vertical-align: middle;
display: inline-block;
*display: inline; // ie7
*zoom: 1; //ie7
}