I have a little problem:
I have one table per row with different columns, and I need to have the first and the second column with the same width percentage so I have used inline-block inside td elements. My problem is that when I don't put text inside td the border of the cell renders differently than a td with text.
What can I do?
I have found that putting: inside, the td works fine, but I don't like this solution.
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
text-align: left;
padding: 1px;
}
<div style="width:100%">
<tr>
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
</tr>
<tr>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
for td tag in css use min-height attribute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
min-height: 20px;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<div style="width:100%">
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
</body>
</html>
Related
I'm just trying to get some help making the table in vertical alignment. My problem is that it shifted the td text to the left.
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table,td, th{
border: 1px solid black;
border: double;
}
td{
display: table-row;
vertical-align: middle;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
This is what it should look like but it doesn't
This is what it actually looks like
This is what it looks like but it needs the colors to fill the table and the text to be the center
Try this!
Hope it helps :)
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table, th {
border: 1px solid black;
border: double;
}
td {
display: block;
text-align: center;
border: 2px solid gray;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
If you need each color on its own table row then your missing some code
for each row you need:
<tr> <!-- Start of row -->
<td>Color 1</td>
</tr> <!-- End of row -->
so your table code should look like:
<table>
<tr> <!-- 1st row -->
<td>Color 1</td>
</tr> <!-- End of 1st row -->
<tr> <!-- 2nd row -->
<td>Color 2</td>
</tr> <!-- End of 2nd row -->
<tr> <!-- 3rd row -->
<td>Color 3</td>
</tr> <!-- End of 3rd row -->
</table>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
I have been strugling with email html.
1) is that the pay now a button is not all green in Outlook. But look correct in gmail web
2) The width of the table/ td on 560px is not applied in Outlook
3) In gmail web mail the body color light green is domaninated by the table white color.
4) I tried to make margin on 10px on the HR by the comment. But in Outlook the margin (top) is much higher.
Please help before it get grey hairs :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<br></br>
<body background="#cbebff" bgcolor="#cbebff" style="background:#cbebff; bgcolor:#cbebff; min-height:1000px; color:#000000;font-family:Arial, Arial, sans-serif; font-size:12px">
<center>
<table border="0" cellpadding="15" cellspacing="0" width="560px">
<tr>
<td colspan="2" width="560px" align="center" valign="top" bgcolor="#3590FF"><img src="http://www.domain.de/images/stories/help_filer/Toplogo.png"></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><strong>{hello} {fullname}.</strong></td>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><div align="right">{order_number_lbl} : {order_number}<br>{order_date_lbl} : {order_date}</div></td>
</tr>
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">{payment_missing}
<br></br><br></br>
<a style="width: 250px; padding: 15px; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;" href="https://www.domain.de/index.php?option=com_epay&set_amount={order_total_mail}&set_invoice={order_id}&set_phone={billing_address_start}{phone}{billing_address_end}">{pay_now_lbl}</a>
<br></br><br></br>
<table width="100%" style="padding: 10px;border: 1px solid #CCCCCC;border-radius: 3px;background: #fafafa;">
<tr>
<td><strong>{customer_note_lbl} :</strong><br><hr style="margin: 10px !important;">{customer_note}</td>
</tr>
</table>
<br></br>
</td>
</tr>
</table>
<br>
<table width="560" border="0">
<tr>
<td><div align="center"><font color="#000000"><strong>Print.dk - Berlin</strong></font></div></td>
</tr>
<tr>
<td><hr>
<div align="center"><font color="#000000"><strong>Email : Info#printdk.de - Web : www.printdk.de</strong></font></div></td>
</tr>
</table>
</center>
</body>
</html>
Pics :
https://www.printdk.de/tmp/mail_gmail.jpg
https://www.printdk.de/tmp/mail_outlook.jpg
try this.
1 :
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;">Pay Now</p>
2 :
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">
<table width="560" style="border-collapse:collapse;" cellpadding="0" cellspacing="0" >
<tr>
<td>Payment Losing</td>
<tr><td>
<br><br><br><br>
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold; color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;">Pay Now</p>
</td></tr>
</tr>
</table>
</td>
</tr>
3 : you have to give width to your outer table to get light green background and put all your email contents in it. this way you can do.
4 : instead of giving margin give padding to your td. as sometimes margin won't render by some email engine.
hope this helps.
you can refer here for HTML Email Guidelines
How would I achieve this table layout?
Here's a sample:
<!doctype html>
<html>
<head>
<title>Rows Demo </title>
<style>
table {
border: 1px solid black;
}
td {
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
</table>
</body>
</html>
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>