CODEWITHSUNDEEP
htmlcsshtml-table
Shafizadeh
Shafizadeh

Reputation: 10340

How to draw a horizontal-separator-line just under the first row?

I have a table like this:

+------+------+
| col1 | col2 | // row1
| col1 | col2 | // row2
| col1 | col2 | // row3
+------+------+

Now I want to draw a line under row1. I can select it using this way:

tr:nth-child(1){ // selecting first row }

Or this way:

tr:first-child { // selecting first row }

But I don't know why border-bottom does not work in this case. Actually I want something like this:

+------+------+
| col1 | col2 | // row1
+------+------+
| col1 | col2 | // row2
| col1 | col2 | // row3
+------+------+

It should be noted, other properties work as well, like this:

tr:first-child {
    color: red;                  // the color will be red
    border-bottom: 1px solid;    // it does not work
}

So, how can I do that?

Upvotes: 1

Views: 762

Answers (3)

Alexander Dixon
Alexander Dixon

Reputation: 874

You can do specific pathing CSS targeting.

tr:first-child td {
    border-bottom: solid 1px red;
}
<table>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

jsFiddle

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

You could use thead and tbody for that.

thead th {
  border-bottom: 1px solid grey;
 }
<table>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>col1</td>
      <td>col2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

Add the following to your CSS:

table  {
    border-collapse: collapse;
}

Additional you have to set a color for your border: border-bottom:1px solid red;

The full example look like this:

table  {
  border-collapse:collapse;
}
tr:first-child {
  color:red;                
  border-bottom:1px solid red;  
}
<table>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
</table>

Upvotes: 3

Related Questions