HTML Element Style How to - Style first row and second differently on table

Question

We would like to know how to style first row and second differently on table.

Answer


<!-- w  ww  .  j  a  va 2s. c o  m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {
  width: 500px;
  border-spacing: 0;
}

tr td.first-column {
  border-left: none;
}

td {
  border-left: 3px solid red;
  border-top: 3px solid red;
}

tr.first-line td {
  border-left: none;
  border-bottom: 3px solid green;
  border-top: none;
}

.second-row td {
  border-top: 0;
}
</style>
</head>
<body>
  <table>
    <tr class="first-line">
      <td class="first-column">Some</td>
      <td>Foobar</td>
      <td>Stuff</td>
    </tr>
    <tr class="second-row">
      <td class="first-column">foobar</td>
      <td>qqq</td>
      <td>111</td>
    </tr>
    <tr>
      <td class="first-column">bar</td>
      <td>111</td>
      <td>111</td>
    </tr>
    <tr>
      <td class="first-column">444</td>
      <td>qqq</td>
      <td>foobar</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: