html table border rendering problem on chrome - html

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>

Related

Cannot add borders to the sections CSS

I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?

Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.

First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }

Trying to conditionally colour table cells background and font colour based on content, negative, positive and no change

Truly lost here.
Have looked at all related code snippets and can't make any work for me.
I need to conditionally format a table cells background color based on content.
Red for <0
Green for >0
White for 0
Also I need to be able to conditionally change the font color of other cells based on content.
Red for <0
Green for >0
Black for 0
I now have this for the background coloring so far, but it does not work as it should. (WORKS NOW)
Have made it work for background finally!!
Just need the font color to work in the last three columns of my table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>colored rating scale</title>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-1.5.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
table {
width: 60em;
}
#name {
width: 20%;
}
#symbol {
width: 5%;
}
#thisrank {
width: 10%;
}
#lastrank {
width: 10%;
}
#change {
width: 10%;
}
#marketcap {
width: 15%;
}
#price {
width: 15%;
}
#weekpc {
width: 5%;
}
#monthpc {
width: 5%;
}
#yearpc {
width: 5%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
</style>
</head>
<body>
<p><br>
<b>This table is broke, (NOW WORKS FOR BACKGROUND COLOR) BUT...<br>
1. <u>font color</u> of "weekpc" , "monthpc" and "yearpc" should be red/green/no-color
according to whether the contents are negative/positive/no-change in percentages.<br>
2. All fonts should be Arial.</b>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td align="center"><b> Last Week </b></td>
<td align="center"><b> Change </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td align="right"> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var change = parseInt($(this).find("td:eq(4)").text().trim());
console.log(change)
//depending on condtion add class..
if (change < 0) {
$(this).find("td:eq(4)").addClass('down')
} else if (change > 0) {
$(this).find("td:eq(4)").addClass('up')
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
</script>
</body>
</html>

You can simply get value of second td tag using :eq(1) and then depending on the value add class.
Demo Code :
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var score = parseInt($(this).find("td:eq(4)").text().trim());
//depending on condtion add class..
if (score < 0) {
$(this).find("td:eq(4)").addClass('down')
$(this).find("td:gt(6)").css({
"color": "red",
"font-family": "Arial"
})
} else if (score > 0) {
$(this).find("td:eq(4)").addClass('up')
$(this).find("td:gt(6)").css({
"color": "#9f0",
"font-family": "Arial"
})
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td valign="center"><b> Last Week </b></td>
<td valign="center"><b> Change </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>

One option would be to update your if statement to include the other options, similar to the answer Swati provided:
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
/* EOS */
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Another option would be to use a ternary operator to compare the scores, if you don't mind hard-coding the index values (you won't have more than those three options on the scale, for example):
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
To conditionally change the font color, you could just update the CSS classes .up, .down, and .nochange to include them as I've done in the snippets (unless you mean to change the font color of other cells besides the scores).

CSS hover not works on a table cell if it has a specific background color

I alredy set a :hover effect on the rows of the table using CSS.
The only problem is the hover effect doesn't work, if a table cell has a specific background color, e.g. green. In the sample code this means the 3rd column doesn't change the background color from green (resp. red) to #96c7ef as soon as you move the mouse over it. (It's ok, that the first row also doesn't change the background color. This is intentionally skipped using <thead>.) On the other cells, that don't have any background color, the hover works.
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
basic.css
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
The hover effect also has the same behaviour, if the style declaration of the two cell (tdX, tdY) is specified as inline style. I specified !important, but nothing changes.
What is wrong with my code ?

If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>

Better style the TDs of the hovered TR using
.multidata tbody>tr:hover td{
background-color:#96c7ef
}

If you mean that the background color of the rows on hover should also be applied to those cells which do already have a background color (i.e. override this), you can extend the selector for the hover rule to also apply to the cells:
.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Actually it's even sufficient to simply use the second line (i.e. the one including the cells) in the selector, since this will apply to all cells of that row:
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Here in your full code:
.multidata td,
.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
.tdX {
background-color: red;
font-weight: bold;
}
.tdY {
background-color: green;
font-weight: bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>

you have forgotten to put <tr> inside <tbody>
something like this
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</tbody>
</table>

.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tr:hover td {
background-color:#96c7ef;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr class="change_on_hover">
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr class="change_on_hover">
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr class="change_on_hover">
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>

Bootstrap table tr border top and bottom doesn't work

I try to have my table like here
I try to put border bottom and top for tr to make my code like in the image. One border works but the other doesn't.
Someone on internet said that it's good to put display block for tr, but if I do that all my text will go left side.
In my code I but red and blue border color to see better.
Can someone tell me how to achieve this?
table {
background-color: #EEEEEE;
margin-top: 40px;
}
table tr {
/*display: block;*/
border-top: 2px solid red;
border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>

There is default styling in Bootstrap that you need to override, either with increased specificity or !important.
The code is
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
Then you need to override the border-collapse property
table {
background-color: #EEEEEE;
margin-top: 40px;
border-collapse: separate !important;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143 vertical-align: top;
border-top: 4px solid green !important;
border-bottom: 4px solid red !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>

I have updated your code. The output will give you top border color as red and bottom border color as blue.
table {
background-color: #EEEEEE;
margin-top: 40px;
}
tr:nth-child(even){
/*display: block;*/
border-top: 2px solid red;
/*background-color: #CC9999;*/
}
tr:nth-child(odd){
/*display: block;*/
border-top: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>

HTML table setting td height wont work

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>