Использование тега <hr> с таблицей?

У меня есть таблица с границами, которые в CSS установлены в "none". Однако я хочу поставить горизонтальную линию, разделяющую каждую строку таблицы. Я попытался разместить теги <hr> между каждым тегом <td> </td> для определенной строки, но он печатает горизонтальную черную линию с небольшими пробелами между каждым столбцом.

Есть ли способ распечатать горизонтальную линию внутри таблицы с помощью другого метода?

Ответы

Ответ 1

Id предлагает положить:

<tr style="border-bottom: 1px solid #000;">

в каждой строке, в которую вы хотите включить линию. Вы также можете сделать это индивидуально для каждой ячейки.

Обновление

Id рекомендует использовать класс css и иметь отдельную таблицу стилей, если сможете. Например

<tr class="bordered"></tr>

tr.bordered {
    border-bottom: 1px solid #000;
}

Ответ 2

Лучший способ добавить горизонтальную линию между строками - это границы CSS. Во-первых, вы хотите свернуть все границы таблицы, чтобы между ячейками не было места (это также может помочь вашему решению, но я не рекомендую использовать hr для этой цели). Затем укажите границу в нижней части каждой ячейки (td). Аналогичным образом вы можете поместить границы влево, вправо, вверх и т.д. См. Автономный HTML ниже.

<html>
<head>
    <style type='text/css'>
        table.test { border-collapse: collapse; }
        table.test td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <table class='test'>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </table>
</body>
</html>

Для получения дополнительных параметров границы, отметьте эту страницу w3Schools.

Ответ 3

Вы можете определить класс CSS для вашего "разделенного" <tr>:

<style>
tr.separated td {
    /* set border style for separated rows */
    border-bottom: 1px solid black;
} 

table {
    /* make the border continuous (without gaps between columns) */
    border-collapse: collapse;
}
</style>

Затем просто отметьте нужные строки:

 <tr>
      <td>
      <td>
 </tr>
 <tr class="separated">
      <td>
      <td>
 </tr>
 <tr>
      <td>
      <td>
 </tr>

См. пример https://jsfiddle.net/64nydcfu/1/

Ответ 4

Вы не можете поместить ничего, что не является строкой таблицы внутри тела таблицы.

Вместо этого вы должны дать класс строкам, которые нуждаются в подчеркивании, чтобы вы могли стилизовать их, чтобы иметь нижнюю границу в таблице стилей.

Ответ 5

Я знаю, что эта нить не была затронута через некоторое время, но я натолкнулся на это возможное решение?

Например, если используется таблица с двумя столбцами, используйте <td colspan="2"></td>. Он будет охватывать две ячейки по двум столбцам, сохраняя необходимость в любом дополнительном CSS.

<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>

Пожалуйста, будь милым, это мой первый пост!:)

Ответ 6

Вы хотите поместить границу на элемент tr. Hr - это горизонтальное правило, а не граница и не должно использоваться как одно.

http://jsfiddle.net/RhaqJ/

tr {
    border-bottom: 1px solid #000;   
}

<table cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Ответ 7

noshade="noshade" атрибут поможет вам удалить тень, и еще одна идея может быть найдена из эта ссылка, я имею в виду CSS-ориентированную линию.

И стиль, основанный на таблице, например

.bottomborder { 
   border-bottom: 1px solid #CECECE; 
}

<td class=border-bottom>

Не работает

<tr class=border-bottom>