將邊框底部添加到表格行

Question

我有一張 3 x 3 的表格。我需要一種方法來為每一行tr的底部添加邊框並為其指定特定顏色。

首先我嘗試了直接的方式，即：

<tr style="border-bottom:1pt solid black;">

但這沒有用。 所以我像這樣添加了 CSS：

tr {
border-bottom: 1pt solid black;
}

那仍然沒有用。

我寧願使用 CSS 因為這樣我就不需要為每一行添加style屬性。 我沒有向<table>添加border屬性。 我希望這不會影響我的 CSS。

Answer 1

添加border-collapse:collapse到你的表規則：

table { 
    border-collapse: collapse; 
}

例子

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

 <table> <tr><td>A1</td><td>B1</td><td>C1</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> </table>

關聯

Answer 2

我以前遇到過這樣的問題。 我不認為tr可以直接采用邊框樣式。 我的解決方法是在行中設置td的樣式：

<tr class="border_bottom">

CSS：

tr.border_bottom td {
  border-bottom: 1px solid black;
}

Answer 3

使用border-collapse:collapse on table 和border-bottom: 1pt solid black; 在路上

Answer 4

采用

border-collapse:collapse如 Nathan 所寫，你需要設置

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

Answer 5

這里有很多不完整的答案。 由於您不能將邊框應用於tr標簽，因此您需要將其應用於td或th標簽，如下所示：

td {
  border-bottom: 1pt solid black;
}

這樣做會在每個td之間留下一個小空間，如果您希望邊框看起來像是tr標簽，這可能是不可取的。 為了“填補空白”可以這么說，您需要在table元素上使用border-collapse屬性並將其值設置為collapse ，如下所示：

table {
  border-collapse: collapse;
}

Answer 6

您可以使用box-shadow屬性來偽造tr元素的邊框。 調整box-shadow的Y position（以下表示為2px）調整粗細。

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Answer 7

我嘗試添加

    table {
      border-collapse: collapse;
    }   

旁邊的

    tr {
      bottom-border: 2pt solid #color;
    }

然后注釋掉 border-collapse 以查看有效的方法。 只是讓帶有 bottom-border 屬性的 tr 選擇器對我有用！

無邊界 CSS 例如。

無邊界照片直播

CSS 邊框前。

帶邊框照片的表格現場直播

Answer 8

采用

table{border-collapse:collapse}
tr{border-top:thin solid}

將“薄固體”替換為 CSS 屬性。

Answer 9

將行顯示為塊。

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

並簡單地顯示備用 colors：

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Answer 10

另一個解決方案是border-spacing屬性：

 table td { border-bottom: 2px solid black; } table { border-spacing: 0px; }

 <table> <tr> <td>ABC</td> <td>XYZ</td> </table>

Answer 11

我在使用這種方法時發現 td 元素之間的空間導致在邊框中形成一個間隙，但不要害怕......

解決這個問題的一種方法：

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

使用 CSS：

td.end{
    border:2px solid black;
}

Answer 12

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

您也可以對整行執行相同的操作。

有border-bottom-style , border-top-style , border-left-style , border-right-style 。 或者只是一次應用於所有四個邊框的邊框border-style 。

您可以在此處查看（並在線嘗試）更多詳細信息

Answer 13

幾個有趣的答案。 因為你只想要一個邊框底部（或頂部），所以這里還有兩個。 假設你想要一個 3px 厚的藍色邊框。 在樣式部分，您可以添加

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

在表代碼中

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Answer 14

如果你不想

• 在桌子上強制折疊邊框
• 使用 TD 元素樣式

您可以使用::after選擇器為 TR 添加邊框：

table tbody tr {
    position : relative; # to contain the ::after element within the table-row
}

table tbody tr td {
    position : relative; # needed to apply a z-index
    z-index : 2; # needs to be higher than the z-index on the tr::after element
}

table tbody tr::after {
    content : '';
    position : absolute;
    z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}

這是我在必須在表行之間放置空格的場景中使用的一個簡單技巧，因此我無法在表上添加邊框折疊，最終結果：

希望能幫助到你：）

Answer 15

無 CSS 邊框底部：

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Answer 16

您不能在 tr 元素上放置邊框。 這在 firefox 和 IE 11 中對我有用：

<td style='border-bottom:1pt solid black'>

Answer 17

HTML

<tr class="bottom-border">
</tr>

CSS

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