在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

Answer 2

尝试这个

      <table class="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>
   </table>

在css中

 .datatable td{
 border-bottom:1px solid black;
 }
.datatable
 {
 border-collapse:collapse;
 }
.datatable tr:first-child td{
color:green;
border-bottom:1px solid green;
}

你可以从这里看到它 http://jsfiddle.net/ZKv68/2/

Answer 3

使用此css

DEMO

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

Answer 4

.代表类.. #代表id ...所以，在css中将.database更改为#database。

试试这个：

<tr class=green>
            <td><strong>2013</strong></td>
            <td>&nbsp;</td>
            <td><strong>144</strong></td>

        </tr>

<tr class=black>
            <td><strong>2012</strong></td>
            <td>&nbsp;</td>
            <td><strong>159</strong></td>

        </tr>

和css：

#datatable tr.green {
    border-bottom: 1px solid green;
}

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

Answer 5

在你的风格中添加以下CSS

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

#datatable tbody tr:first-child td{
    color:#00FF00;
}

这是一个实例

http://jsfiddle.net/Ycyyn/

Answer 6

看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 7

首先，<table id="datatable">在这里声明一个ID并在CSS .datatable td中声明一个类。您必须使用#来选择ID

只需添加此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

Answer 8

你的CSS有误。使用#datatable而不是.datatable。

将类或ID应用于第一行，并使用以下内容：

<tr class="green">
    <td><strong>2013</strong></td>
     <td>&nbsp;</td>
     <td><strong>144</strong></td>
 </tr>

CSS：

.green{
    color:green; 
}

您也可以使用

table tr:first-child {
    color:green;
}

代替

Answer 9

如果您使用的是id，那么您需要使用＃在CSS中引用它。 Dot适合上课。 要仅引用第一行，您可以使用＆＃39; first-child＆＃39;

示例：

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

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