Question

我希望<tr>有一个边框底部，但它没有显示。这就是我所做的：jsfiddle
代码（尽管你可以在小提琴中看到它）：

<table style="width:600px;">
  <tr style="border-bottom: 1px solid black;">
    <td style="width:30%">header1</td>
    <td style="width:50%">header2</td>
    <td style="width:20%">header3</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something2</td>
    <td>something3</td>
  </tr>
</table>

另外，当我在<td style="border-bottom:1px solid black"> <{1}}的{{1}}上使用<td>时，我不希望在底部边框之间留出空格

Answer 1

您无法设置<tr>标记的样式，它只是表格元素的逻辑分组标记。

由于您只想要对顶行设置样式，只需在顶行中为元素指定一个特定的类标识符和样式：

JSFiddle

<强> CSS

table{
    border-spacing: 0px;
}
.topRow{
    border-bottom: 1px solid black; 
    width:50%;
}

<强> HTML

<table style="width:600px;">
  <tr>
    <td class="topRow">header1</td>
    <td class="topRow">header2</td>
    <td class="topRow">header3</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something2</td>
    <td>something3</td>
  </tr>
</table>

Answer 2

正如其他人所说，你不能设置tr样式，但你可以设置样式td。你可以像this那样做。

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

表格的边框不会出现

2 个答案: