我有一張3乘3的桌子。我需要一種方法來添加每行tr底部的邊界，并給它一個特定的顏色。

首先，我嘗試了直接的方法，即:

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

但是那沒有用。所以我加了這樣的CSS:

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

那還是沒用。

我更喜歡使用CSS，因為這樣我就不需要給每一行都添加一個樣式屬性。 我還沒有給& lt表& gt。我希望這不會影響我的CSS。

將邊框折疊:折疊添加到您的表格規則:

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>

我以前也有過這樣的問題。我覺得tr不能直接拿一個邊框造型。我的解決方法是設置行中tds的樣式:

<tr class="border_bottom">

CSS:

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

使用border-collapse:在表格上折疊，border-bottom: 1pt純黑；在旅途中

使用

邊界崩潰:如內森所寫的那樣崩潰，你需要設置

TD { border-bottom:1px solid # 000；}

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

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

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

table {
  border-collapse: collapse;
}

您可以使用box-shadow屬性來偽造tr元素的邊框。調整框陰影的Y位置(下面表示為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);
}

我試著添加

table {
      border-collapse: collapse;
    }

沿著

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

然后注釋掉border-collapse，看看什么有效。讓tr選擇器帶有底部邊框屬性對我來說很有用！

沒有邊框。

無邊框照片直播

CSS邊框ex。

帶邊框照片的表格

使用

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

用CSS屬性替換“薄實體”。

將行顯示為塊。

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

并且簡單地顯示替換顏色:

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

另一個解決方案是邊框間距屬性:

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

table {
  border-spacing: 0px;
}

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

如果你不想的話

在表格上強制邊框折疊 使用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 ...
}

這是我在一個場景中使用的一個簡單技巧，在這個場景中，我必須在表格行之間放置空格，這樣我就不能在表格上添加邊框折疊，最終結果是:

希望有幫助:)

我發現當使用這種方法時，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;
}

& ltTD style = " border-bottom-style:solid；底部邊框:粗虛線# ff0000"& gt

您也可以對整行進行同樣的操作。

有下邊框樣式、上邊框樣式、左邊框樣式、右邊框樣式。或者只是同時應用于所有四個邊框邊框樣式。

你可以在這里看到更多的細節

幾個有趣的回答。因為你只是想要一個底部(或頂部)的邊界，這里還有兩個。假設你想要一個3像素厚的藍色邊框。在樣式部分，您可以添加

.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>

無CSS邊框底部:

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

不能給tr元素加邊框。這在firefox和IE 11中對我有效:

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

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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