I get confused when I want set two cells (x, y) in one cell CoordLamberts?
.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th>CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>x</th>
<th>y</th>
<th></th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>
What I expect:
What I get:
.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>
This should work what you were missing was that you needed colspan instead of rowspan CoordLamberts should use 2 columns,
.techniques{
width: 70%;
border: 1px solid;
}
.techniques,.techniques th, .techniques td{
border-collapse: collapse;
border: 1px solid;
}
<!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">
<title>Document</title>
</head>
<body>
<table class="techniques">
<tr>
<th rowspan="2">Foret </th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<td>x</td>
<td>y</td>
</tr>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td>
<td>395 055</td>
<td>391 386</td>
<td>13</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td colspan="6">Superficie</td>
<td>102</td>
</tr>
</table>
</body>
this way.
HTLM table use <thead>, <tbody> and <tfoot> ( + <caption> )
.techniques {
width : 70%;
border : 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse : collapse;
border : 1px solid;
}
.techniques td {
vertical-align : text-top;
text-align : center;
}
.techniques thead {
background-color: lightgrey;
}
.techniques thead th[rowspan="2"]:nth-child(-n+4) {
min-width: 6em;
}
.techniques thead th[colspan="2"] {
min-width: 10em;
}
.techniques thead th[rowspan="2"]:last-of-type {
min-width: 10em;
}
.techniques tfoot {
background-color: whitesmoke;
}
<table class="techniques">
<thead>
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td><td>443</td><td>634</td><td>13</td>
</tr>
<tr>
<td>7</td><td>443</td><td>634</td><td>26</td>
</tr>
<tr>
<td>8</td><td>443</td><td>634</td><td>54</td>
</tr>
<tr>
<td>13</td><td>443</td><td>634</td><td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">superficie(ha)</td>
<td colspan="2"></td>
<td>102</td>
</tr>
</tfoot>
</table>
Related
I am having trouble to properly space the header cells and aligning the 2nd footer cell with the 3rd data cell. I would like to properly space the header cells and align the 2nd footer cell exactly under the 3rd column!
Just a beginner trying to practice. Help would be really appreciated!
HTML:
<table>
<tr class="headings_row">
<th>Country</th>
<th>Order ID</th>
<th>Order Amount</th>
</tr>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
<tfoot>
<tr>
<th>Total</th>
<th colspan="2">$5,000</th>
</tr>
</tfoot>
</table>
CSS:
th:nth-child(even) {
background-color: #427fef;
}
th:nth-child(odd) {
background-color: #427fef;
}
tr:nth-child(odd) {
background-color: #eef7ff;
}
table {
border: #c4dcf3;
border-collapse: collapse;
}
.headings_row {
border-spacing: 10px;
}
Here:
tfoot th {
text-align: left;
}
th:nth-child(even) {
background-color: #427fef;
}
th:nth-child(odd) {
background-color: #427fef;
}
tr:nth-child(odd) {
background-color: #eef7ff;
}
table {
border: #c4dcf3;
border-collapse: collapse;
}
.headings_row {
border-spacing: 10px;
}
<table>
<tr class="headings_row">
<th>Country</th>
<th>Order ID</th>
<th>Order Amount</th>
</tr>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>$5,000</th>
</tr>
</tfoot>
</table>
I want to make a scrolling table using css but I have some trouble, when I using overflow-y : auto and then the <td> is overload in <tr>, for example code I put HTML and CSS code in here :
HTML CODE :
<table id="check" class="table table-fixed">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
</tbody>
CSS CODE :
#check {
width: 70%;
margin-top : 5%;
margin-left: 45%;
border-collapse: collapse;
width: 100%;
}
#check td, #check th {
border: 1px solid #ddd;
padding: 8px;
}
#check tr:nth-child(even){background-color: #f2f2f2;}
#check tr:hover {background-color: #ddd;}
#check th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.table-fixed tbody {
height: 250px;
overflow-y: auto;
margin-top: 1px;
table-layout: fixed;
display: block;
overflow: auto;
}
.table-fixed thead tr {
display: block;
}
I also put the link for code editor online in codepen : My Code
Inspired by following link with use of JQuery.
https://medium.com/#vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc
$( document ).ready(function() {
$('#header_row').width(
$('#header_row').width() - ($('#table_1').width() - $('#tbody').width()))
});
.fixed_header {
width: 400px;
table-layout: fixed;
border-collapse: collapse;
margin: 0 auto;
}
.fixed_header tr:nth-child(even) {
background-color: #f2f2f2;
}
.fixed_header tr:hover {
background-color: #ddd;
}
.fixed_header tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
background-color: #4CAF50;
}
.fixed_header thead {
color: #fff;
}
.fixed_header thead th {
border: 1px solid white
}
.fixed_header tbody td {
border: 1px solid gray
}
.fixed_header th,
.fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div style="width: 100%">
<table id="table_1" class="fixed_header">
<thead>
<tr id="header_row">
<th>No</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
</html>
Hi im a beginner in css i have these table below its 3 separate table and i would like to make all of the table column height equal is there any easy method to go about this? Any suggestion would be greatly appreciated thank you!
Here is my JSFiddle
<body>
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class" >
<thead>
<th>Fruits</th>
</thead>
<tbody >
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
it's possible when a table change by CSS, but it's not good,
You can try this code here https://jsfiddle.net/10t4gv92/21/ Or
.fontcolor {
color: #25BAD0;
}
.center {
display: flex;
justify-content: center
}
.class {
font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
border-collapse: collapse;
}
table {
display: block;
width: 25%;
border:1px solid #25BAD0;
}
table tr,
table th,
table tr td,
table tbody,
table thead {
display:block;
width: 100%;
}
th {
width:100%;
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #25BAD0;
}
td {
width: 100%;
padding-top: 5px;
padding-left: 8px;
}
.fruitsTable th { width:100%; }
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable3 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
I'm trying to use both padding and border-bottom in html to get this table:
But in order to make the border-bottom one line I added border-collapse: collapse; and now I don't have padding, how can I use both?
here is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>
and my css code:
table {
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin:
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}
tr.line { border-bottom: 2px solid black; }
You have errors in your HTML and your CSS. After correcting those, all that's needed is to set border-spacing: 0 instead of border-collapse: collapse. Then it seems to work well.
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
border-collapse: separate;
border-spacing:0;
padding: 20px;
}
th, td {
text-align: left;
padding: 0 10px;
}
th.center, td.center {
text-align: center;
}
tbody tr:last-child td {
border-bottom: 2px solid black;
}
<table>
<thead>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
</tbody>
<tfoot>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</table>
Note that I also took the liberty of dividing the table in a thead, a tbody and a tfoot. With such a structure, you won't need tricks like class="line" to indicate the tr that needs the line; this can now be determined automatically (it's the last tr in the tbody).
HTML tables have a different display property than divs and they behave differently.
table {
border-collapse: collapse;
}
tbody {
border-bottom: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table style="width:50%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>total</th>
<td></td>
<td>282</td>
</tr>
</tfoot>
</table>
Also on jsfiddle: https://jsfiddle.net/c6mwh2cL/
Also check out this answer: tbody border not showing
Also, avoid putting <div> inside a table. A table should only have <thead>, <tbody> and <tfoot> elements, and those should only have <tr> elements, and those should only have <th> and <td>. The semantic has it's purpose and this is how it's meant to be rendered.
Does this help?
Using table border-spacing: 0;
tr.line td {
border-top: 2px solid black;
}
works
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
padding: 20px 20px 20px 20px;
border-spacing: 0;
}
th {
text-align: left;
padding: 0 10px;
}
td, th { }
.center {
text-align: center;
}
td {
padding: 0 10px;
}
tr.line td {
border-top: 2px solid black;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr class="line">
<td></td>
<td></td>
<td>Sum C</td>
<td>Sum D</td>
</tr>
</tbody>
</table>
I am able to change the border styling of the top bar in the table, but I can't it to change the background color no matter what I do. Can anyone tell me where I am going wrong? My code is below:
<table>
<thead>
<tr >
<th>strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
CSS:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
Your html code has some syntax erros:
Corrected here and working well:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
</table>
</html>
http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview
It's working for me! Take care with the tags... <strong>
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</table>
Your CSS should include one more rule, for the <th> tag:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr, table thead th {
background-color: pink;
border: 4px solid pink;
}
Also, you have error in the HTML code - missing starting bracket in <strong> tag on line <th>strong>Colour</strong></th>.
Check out the working fiddle.
Try like this: Demo
Instead of giving border for tr you can give for td and th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
And try to open and close tags properly to get expected output :)
No need to add so many styles. Apply this.
table th, table thead tr td {
border: 1px solid red;
}
table thead tr {
background-color: red;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>