Styling a table in html - html

Question

I am new in CSS.I have a Table Like this
<table id="datatable">
<tbody>
<tr>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
And I need to style this table as shown below.I have tried something but I can't able to style like that
I just tried
.datatable td {
border-bottom: 1px solid black;
}
Based on the image below,I need first td border as green and others are black.
Can any one help?Thanks in advance for help.

Answer 1

In your code, datatable is an ID not a class. Update your CSS like below.
#datatable tr:first-child td{
border-bottom:1px solid green;
}
#datatable tr td{
border-bottom:1px solid black;
}
#datatable
{
border-collapse:collapse;
}
DEMO

Answer 2

try this one
<table class="datatable">
<tbody>
<tr>
<td ><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
</table>
In css
.datatable td{
border-bottom:1px solid black;
}
.datatable
{
border-collapse:collapse;
}
.datatable tr:first-child td{
color:green;
border-bottom:1px solid green;
}
You can see it from here
http://jsfiddle.net/ZKv68/2/

Answer 3

use this css
DEMO
.green {
color: green;
}
#datatable td {
border-bottom: 1px solid black;
}
#datatable {
border-collapse: collapse;
}

Answer 4

look here
#datatable{
border-collapse:collapse;
}
#datatable td{
padding-left:4px;
padding-right:4px;
}
#datatable tr{
color:#444444;
border-bottom:2px solid #999999;
}
#datatable tr:first-child{
color:green;
}

Answer 5

. represents class..# represents id...so, change .database to #database in css.
try this:
<tr class=green>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr class=black>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
and in css:
#datatable tr.green {
border-bottom: 1px solid green;
}
#datatable tr.black {
border-bottom: 1px solid black;
}

Answer 6

Add following CSS in your styles
#datatable{
border-collapse: collapse;
}
#datatable td{
border-bottom:1px solid black;
color:#000;
}
#datatable tbody tr:first-child td{
color:#00FF00;
}
here is a live example
http://jsfiddle.net/Ycyyn/

Answer 7

You have a mistake in your CSS. Use #datatable instead of .datatable.
Apply a class or ID to your first row and use something like:
<tr class="green">
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
CSS:
.green{
color:green;
}
You can also use
table tr:first-child {
color:green;
}
instead

Answer 8

If you are using id, then you need to use # to reference it in CSS. Dot is for class.
To reference just the first row, you can use 'first-child'
Example:
#datatable td{
border-bottom:1px solid black;
}
#datatable tr:first-child td {
border-bottom:1px solid green;
}

Answer 9

First of all <table id="datatable"> here you declare an ID and in your CSS .datatable td a class. You have to use # for selecting IDs
Just add this CSS:
#datatable tr:first-child td{
border-bottom:1px solid green;
color:green;
}
#datatable td{
border-bottom:1px solid black;
}
#datatable {
border-collapse: collapse;
}
DEMO