是否可以給表格行加邊框，& lttr & gt一步到位，而不是給單個單元格添加邊框，& lttd & gt比如，
<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元素上設置邊框屬性，但是根據CSS 2.1規范，這樣的屬性在分離邊框模型中不起作用，這往往是瀏覽器中的默認設置。參考文獻。:17.6.1分離邊界模型。(border-collapse的初始值根據CS S 2.1是分開的，有些瀏覽器還設置為表格的默認值。最終結果是，除非你明確指定折疊，否則在幾乎所有的瀏覽器上都有分離的邊框。)
因此，您需要使用折疊邊框。示例:
<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>絕對的！就用
<tr style="outline: thin solid">你喜歡哪一排。這里有一把小提琴。
當然，正如人們提到的，如果你愿意，你可以通過一個id，或者類，或者其他方式來實現。
是的。我更新了我的答案演示
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;
}如果您只想設計一個& lttr & gt你可以在課堂上做:第二次演示
您可以使用tr元素的box-shadow屬性作為邊框的替代。另外，同一元素上的任何邊框半徑屬性也將應用于方框陰影。
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);利用CSS類:
tr.border{
outline: thin solid;
}像這樣使用它:
<tr class="border">...</tr>左側單元格:
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>你可以試試這個(每一行的底部都有邊框)
table {
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}添加邊框間距: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;
}在與這個問題斗爭了很長時間之后，我得出的結論是，非常簡單的答案是用空單元格填充表格，將表格的每一行填充到相同數量的單元格中(顯然要考慮列跨度)。使用計算機生成的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>