Как: "Разделить строки строк строкой"

Ответ 1

Существует несколько способов сделать это. Используя только HTML, вы можете написать

<table border=1 frame=void rules=rows>

или, если вам нужна граница выше первой строки и ниже последней строки,

<table border=1 frame=hsides rules=rows>

Это довольно негибко; вы не можете, например, сделайте линии пунктиром таким образом или толще, чем один пиксель. Вот почему в прошлом люди использовали специальные строки разделителя, состоящие из ничего, кроме некоторого содержимого, предназначенного для создания строки (он становится несколько грязным, особенно когда вам нужно создавать строки, например, на несколько пикселей, но возможно).

В большинстве случаев люди используют для этого свойства CSS border. Его довольно простой и кросс-браузер. Но обратите внимание, что для непрерывности строк вам необходимо предотвратить интервал между ячейками, используя либо атрибут cellspacing=0 в теге table, либо правило CSS table { border-collapse: collapse; }. Удаление такого интервала может потребовать добавления в ячейки некоторого дополнения (предпочтительно с CSS).

В самом простом случае вы можете использовать

<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>

Это помещает границу выше первой строки и ниже последней строки. Чтобы предотвратить это, добавьте, например, в таблицу стилей:

tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}

Ответ 2

Просто введите границу строк:

​table tr {
    border-bottom: 1px solid black;
}​

table tr:last-child { 
    border-bottom: none; 
}

Вот fiddle.

Отредактировано как указано @pkyeck. Второй стиль избегает строки под последней строкой. Возможно, вы ищете это.

Ответ 3

Вы можете использовать свойство border-bottom css.

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid black;
}

table tr:last-child {
  border: 0;
}

<table>
  <tr>
    <td>1</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bar</td>
  </tr>
</table>

Ответ 4

HTML

<table cellspacing="0">
  <tr class="top bottom row">
    <td>one one</td>
    <td>one two</td>
  </tr>
  <tr class="top bottom row">
    <td>two one</td>
    <td>two two</td>
  </tr>
  <tr class="top bottom row">
    <td>three one</td>
    <td>three two</td>
  </tr>

</table>​

CSS

tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }​

DEMO

Ответ 5

Стиль элемента-строки с помощью css:

border-bottom: 1px solid black;

Ответ 6

Вы должны использовать CSS.

По-моему, когда у вас есть таблица, часто это хорошо с отдельной линией на каждой стороне линии.

Попробуйте этот код:

HTML:

<table>
    <tr class="row"><td>row 1</td></tr>
    <tr class="row"><td>row 2</td></tr>
</table>

CSS

.row {
    border:1px solid black; 
}

Bye

Andrea

Ответ 7

Если вы не хотите использовать CSS, попробуйте следующее между строками:

    <tr>
    <td class="divider"><hr /></td>
    </tr>

Ура !!