html - 在 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 而不是类。像下面这样更新您的 CSS。

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

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

DEMO