6

I have the following setup in MS IE8:

 <table class="my-info">
    <tbody>
        <tr>
            <td class="info-left">First name:</td>
            <td class="info-highlight">FirstName</td>
        </tr>
        <tr>
            <td class="info-left">Surname:</td>
            <td class="info-highlight">Surname</td>
        </tr>
        <tr>
            <td class="info-left">Email:</td>
            <td class="info-highlight">TheEmail</td>
        </tr>
    </tbody>
 </table>

What I am after is a means of placing like a beveled line/dashed line or just a line between the Surname and Email.

I have tried <hr /> inside a but the spacing top and bottom is too much. I want it too look neat and compact.

3 Answers 3

11

I'd probably do something like this. Of course, I'm a big fan of border-collapse.

.my-info {
  border-collapse: collapse;
}

.bottom-border {
  border-bottom: 1px dashed black;
}
<table class="my-info">
  <tbody>
    <tr>
      <td class="info-left">First name:</td>
      <td class="info-highlight">FirstName</td>
    </tr>
    <tr>
      <td class="info-left bottom-border">Surname:</td>
      <td class="info-highlight bottom-border">Surname</td>
    </tr>
    <tr>
      <td class="info-left">Email:</td>
      <td class="info-highlight">TheEmail</td>
    </tr>
  </tbody>
</table>

/JSFiddle/ http://jsfiddle.net/wHmyx/

1
  • 1
    This! +1, but I'd push it further with only having class applied once to tr directly. We all know that IE7 doesn't play nicely with tr styling, so the rule selector should become .bottom-border>td
    – Oleg
    Mar 30, 2012 at 4:19
9

Maybe:

<tr>
  <td class="info-left">Surname:</td>
  <td class="info-highlight">Surname</td>
</tr>
<tr>
  <td colspan="2" class="divider">
    <hr />
  </td>
</tr>
<tr>
  <td class="info-left">Email:</td>
  <td class="info-highlight">TheEmail</td>
</tr>
1

You can do this easily by CSS nth-child selector; see the CSS and HTML below:-

.my-info td {
  padding: 2px;
}

.my-info tr:nth-child(2) {
  border-bottom: solid 1px black;
}
<table class="my-info">
  <tbody>
    <tr>
      <td class="info-left">First name:</td>
      <td class="info-highlight">FirstName</td>
    </tr>
    <tr>
      <td class="info-left">Surname:</td>
      <td class="info-highlight">Surname</td>
    </tr>
    <tr>
      <td class="info-left">Email:</td>
      <td class="info-highlight">TheEmail</td>
    </tr>

  </tbody>

see the demo:- http://jsfiddle.net/TfK6Z/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.