Добавление разделителя в структуру таблицы HTML

Question

У меня есть следующие настройки в 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>

То, что мне нужно, это средство размещения, как скошенная линия / пунктирная линия или просто линия между фамилией и электронной почтой.

Я пробовал <hr /> внутри, но расстояние между верхом и низом слишком велико.Я хочу, чтобы это тоже выглядело аккуратно и компактно.

Answer 1

Я бы, наверное, сделал что-то подобное.Конечно, я большой поклонник коллапса границы.

/ CSS /

.my-info {border-collapse: collapse;}
.bottom-border { border-bottom: 1px dashed black; }

/ HTML /

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

Answer 2

Может быть:

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

Answer 3

Привет, вы можете легко это сделать с помощью селектора css nth-child, см. Css и html ниже: -

CSS

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

.my-info tr:nth-child(2) {
  border-bottom:solid 1px black;
}

HMTL

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

посмотрите демо: - http://jsfiddle.net/TfK6Z/1/