Можно ли ограничить строку таблицы <tr>
за один раз вместо того, чтобы задавать границу отдельным ячейкам, <td>
например,
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
<tbody>
<tr>
<th style="width: 96px;">Column 1</th>
<th style="width: 96px;">Column 2</th>
<th style="width: 96px;">Column 3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Это дает границу вокруг данного, <tr>
но требует границы вокруг отдельных ячеек.
Можно ли дать бордюр <tr>
только за один раз?
источник
Абсолютно! Просто используйте
<tr style="outline: thin solid">
на какой гребле вам нравится. Вот скрипка .
Конечно, как уже упоминалось, вы можете сделать это с помощью идентификатора, класса или других средств, если хотите.
источник
<tr>
но Mozilla Fire Fox не отображает рамку.outline
вместоborder
. Это должно исправить совместимость. У меня есть только банкомат Chrome, поэтому я не могу его протестировать.Да. Я обновил свой ответ ДЕМО
table td { border-top: thin solid; border-bottom: thin solid; } table td:first-child { border-left: thin solid; } table td:last-child { border-right: thin solid; }
Если вы хотите стилизовать только один,
<tr>
вы можете сделать это с помощью класса: Second DEMOисточник
last-child
(вроде не поддерживает).Используйте классы CSS:
tr.border{ outline: thin solid; }
и используйте его как:
<tr class="border">...</tr>
источник
Вы можете использовать свойство box-shadow в элементе tr в качестве замены границы. В качестве плюса любое свойство border-radius того же элемента также будет применяться к тени блока.
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
источник
outline
дает. Должен быть более высокий ответ.Левая ячейка:
style="border-style:solid;border-width: 1px 0px 1px 1px;"
средняя ячейка (и):
style="border-style:solid;border-width: 1px 0px 1px 0px;"
правая ячейка:
style="border-style:solid;border-width: 1px 1px 1px 0px;"
источник
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none"> <tbody> <tr> <th style="width: 96px;">Column 1</th> <th style="width: 96px;">Column 2</th> <th style="width: 96px;">Column 3</th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td> <td style="border-top: thin solid; border-bottom: thin solid;"> </td> <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>
источник
добавление border-spacing: 0rem 0.5rem; создает пространство для каждой ячейки (td, th) в нижней части, не оставляя места между ячейками
table.app-table{ border-collapse: separate; border-spacing: 0rem 0.5rem; } table.app-table thead tr.border-row the, table.app-table tbody tr.border-row td, table.app-table tbody tr.border-row th{ border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; vertical-align: middle; white-space: nowrap; font-size: 0.875rem; } table.app-table thead tr.border-row th:first-child, table.app-table tbody tr.border-row td:first-child{ border-left: 1px solid #EAEAEA; } table.app-table thead tr.border-row th:last-child, table.app-table tbody tr.border-row td:last-child{ border-right: 1px solid #EAEAEA; }
источник
После долгой борьбы с этим я пришел к выводу, что поразительно простой ответ - просто заполнить таблицу пустыми ячейками, чтобы заполнить каждую строку таблицы одинаковым количеством ячеек (очевидно, с учетом colspan). С помощью компьютерного HTML это очень просто организовать и позволяет избежать сложных обходных путей. Следующая иллюстрация:
<h3>Table borders belong to cells, and aren't present if there is no cell</h3> <table style="border:1px solid red; width:100%; border-collapse:collapse;"> <tr style="border-top:1px solid darkblue;"> <th>Col 1<th>Col 2<th>Col 3 <tr style="border-top:1px solid darkblue;"> <td>Col 1 only <tr style="border-top:1px solid darkblue;"> <td colspan=2>Col 1 2 only <tr style="border-top:1px solid darkblue;"> <td>1<td>2<td>3 </table> <h3>Simple solution, artificially insert empty cells</h3> <table style="border:1px solid red; width:100%; border-collapse:collapse;"> <tr style="border-top:1px solid darkblue;"> <th>Col 1<th>Col 2<th>Col 3 <tr style="border-top:1px solid darkblue;"> <td>Col 1 only<td><td> <tr style="border-top:1px solid darkblue;"> <td colspan=2>Col 1 2 only<td> <tr style="border-top:1px solid darkblue;"> <td>1<td>2<td>3 </table>
источник