Czy możliwe jest obramowanie wiersza tabeli <tr>
za jednym razem zamiast nadawania obramowania poszczególnym komórkom, na <td>
przykład
<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>
Daje to obramowanie wokół danego, <tr>
ale wymaga obramowania wokół poszczególnych komórek.
Czy możemy wyznaczyć granicę <tr>
tylko za jednym razem?
źródło
Absolutnie! Po prostu użyj
<tr style="outline: thin solid">
na którymkolwiek rzędzie lubisz. Oto skrzypce .
Oczywiście, jak wspominali ludzie, możesz to zrobić za pomocą identyfikatora, klasy lub w inny sposób, jeśli chcesz.
źródło
<tr>
ale Mozilla Fire Fox nie wyświetla obramowania.outline
zamiastborder
. To powinno naprawić kompatybilność. Mam tylko bankomat Chrome, więc nie mogę go przetestować.Tak. Zaktualizowałem moją odpowiedź DEMO
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; }
Jeśli chcesz stylizować tylko jedną
<tr>
, możesz to zrobić za pomocą klasy: Second DEMOźródło
last-child
(wydaje się, że nie obsługuje).Skorzystaj z klas CSS:
tr.border{ outline: thin solid; }
i używaj go jak:
<tr class="border">...</tr>
źródło
Możesz użyć właściwości box-shadow w elemencie tr jako substytutu dla obramowania. Dodatkowo każda właściwość border-radius tego samego elementu będzie miała również zastosowanie do cienia ramki.
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
źródło
outline
ma miejsce. Powinna być wyższa odpowiedź.Lewa komórka:
style="border-style:solid;border-width: 1px 0px 1px 1px;"
komórki środkowe:
style="border-style:solid;border-width: 1px 0px 1px 0px;"
prawa komórka:
style="border-style:solid;border-width: 1px 1px 1px 0px;"
źródło
<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>
źródło
dodanie odstępów między obramowaniami: 0rem 0,5rem; tworzy przestrzeń dla każdej komórki (td, th) na dole, nie pozostawiając odstępu między komórkami
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; }
źródło
Po długiej walce z tym doszedłem do wniosku, że spektakularnie prostą odpowiedzią jest po prostu wypełnienie tabeli pustymi komórkami, aby dopełnić każdy wiersz tabeli taką samą liczbą komórek (oczywiście biorąc pod uwagę colspan). Dzięki komputerowo generowanemu kodowi HTML jest to bardzo proste do zaaranżowania i pozwala uniknąć skomplikowanych obejść. Poniższa ilustracja:
<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>
źródło