HTML table setting td height wont work - 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>

Related

Trying to make table vertical

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>

html table border rendering problem on chrome

html table border rendering problem on chrome. I hava code like:
table {
border-collapse: collapse;
}
#first td {
width: 200px;
height: 80px;
border-style: dashed;
}
#second td {
width: 200px;
height: 80px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="first">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
<br/>
<table id="second">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
</body>
</html>
On first table, the left border of c2 is looks like a solid line, while I set to td {border-style: dashed;}. I'm troubled.
On second table, why the left border of c2,c3 are darker then c1's on Chrome?
And how to fix them? All the test works fine in Firefox.
You can use solid color instead of used rgba color
td {
border-style: solid;
border-color:#ddd;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #ddd;
/* border-collapse: collapse; */
border-collapse: collapse;
}
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
it because of you give opacity to border color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border-style: solid;
border-color: #a3a3a3;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #a3a3a3;
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>
Insted of using rgba -- border-color: rgba(0, 0, 0, 0.2); ====== use #c1c1c1 code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border: dashed 1px #c1c1c1;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>

HTML+CSS Table row inline-block border no text

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>

HTML Table: THEAD width depending on TBODY in Chrome

After some testing i've found that Chrome doesn't calculate the THEAD column width depending on the TBODY elements, as Opera does. Is there a way to avoid specifying this in the thead? Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
table{
width:800px;
border:1px solid #CCCCCC;
table-layout: fixed;
border-spacing:0px;
box-sizing: border-box;
}
table td.option{
width:100px;
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table td.active{
text-align:center;
width:100px;
}
td.thead{
/* something that makes that width: is depending on the total width of the tbody elements */
}
table td.nonfixed{
width:100%;
}
</style>
<title>Untitled</title>
</head>
<body>
<table>
<thead>
<tr>
<td class="thead">Name</td>
<td class="thead">Description</td>
<td class="thead">Active</td>
<td class="thead" colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="100">+ Add new row</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is solved with adding an <colgroup> element. Chrome uses the first row (tr or colgroup) to determine the td width. This solution encounters some problems in older versions of IE, that doesn't support td width with percentages.

HR Margin issue with IE6, IE8 & FF

HI ,
I am getting Gap(some white space) between the <HR> & <TABLE> tags in IE6. But the same code is working differently in IE8 & FF. Here is the my sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="display: inline; height: 100%;" id="printdiv">
<table width="70%" id="Tableprint">
<tbody>
<tr>
<td style="padding-left: 15px;">
<table width="100%" style="border: 0px solid rgb(204, 204, 204);">
<tbody>
<tr>
<td nowrap="" colspan="2">
<span class="formLabel">dev site</span>
<span class="bodyText">Transfer Secure </span></td>
</tr>
<tr>
<td nowrap="" align="left" width="50%" valign="bottom">
<span><b>Current Date:Wednesday, 02 Mar 2011, 01:42 IST</b></span>
<span><b>Report Date</b></span>
<span>Wednesday,20 Oct 2010</span></td>
<td align="right" valign="bottom">
<input type="button" id="Buttoncancel" value="BACK">
</td>
</tr>
</tbody>
</table>
<hr align="left" width="100%">
<table cellspacing="0" width="100%" style="border: 1px;">
<thead>
<tr>
<td style=" width: 10%; padding-left: 5px;"><b>Column1</b></td>
<td align="right" style="padding-bottom: 3px; font-weight: bold;">Credit</td>
</tr>
</thead>
</table>
<hr align="left" width="100%">
<div id="Footer">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="right">Test Data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If I add the following style then I am getting space in IE 8 & FF but the problem is in IE 6 I am seeing extra space around the <HR>
hr {
margin-bottom: 7px;
margin-top: 7px;
}
Please Help me in this.
Thanks in Advanceenter code here
Add this CSS:
table, tr, td, hr {
line-height: 1.15;
}
hr {
clear: both;
display: block;
*margin: -7px 0; /* ie7 and below */
}
This helped me, but the site isn't working properly, so here's a cached link.