在html中设置表格

Question

我是CSS的新手.我有一个像这样的表

<table id="datatable">
    <tbody>
        <tr>
            <td><strong>2013</strong></td>
            <td>&nbsp;</td>
            <td><strong>144</strong></td>

        </tr>
        <tr>
            <td><strong>2012</strong></td>
            <td>&nbsp;</td>
            <td><strong>159</strong></td>

        </tr>

        <tr>
            <td><strong>2011</strong></td>
            <td>&nbsp;</td>
            <td><strong>147</strong></td>

        </tr>
        <tr>
            <td><strong>2010</strong></td>
            <td>&nbsp;</td>
            <td><strong>137</strong></td>
        </tr>
        <tr>
            <td><strong>2009</strong></td>
            <td>&nbsp;</td>
            <td><strong>303</strong></td>
        </tr>

而且我需要设置这个表的样式,如下所示.我尝试了一些东西,但我不能那样的样式

我刚试过

.datatable td {
    border-bottom: 1px solid black;
}

根据下图,我需要第一个td边框为绿色,其他为黑色.任何人都可以帮忙吗？在此先感谢您的帮助.

Answer 1

在你的代码,datatable是ID不是class.像下面一样更新你的CSS.

 #datatable tr:first-child td{
   border-bottom:1px solid green;
 }

 #datatable tr td{
   border-bottom:1px solid black;
 }
 #datatable
 {
  border-collapse:collapse;
 }

DEMO