向表行添加边框-底[英]Add border-bottom to table row 本文翻译自  Sangram Nandkhile  查看原文  2012-04-06  563782    css/ html/

I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color.

我有一个3×3的表格。我需要一种方法来为每行tr的底部添加边框，并给它一个特定的颜色。

First I tried the direct way, i.e.:

首先我尝试了直接法，即:

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

But that didn't work. So I added CSS like this:

但这并不工作。我添加了CSS

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

That still didn't work.

仍然不工作。

I would prefer to use CSS because then I don't need to add a style attribute to every row. I haven't added a border attribute to the <table>. I hope that that is not affecting my CSS.

我更喜欢使用CSS，因为这样我就不需要为每一行添加样式属性。我还没有向

添加边框属性。我希望这不会影响我的CSS。

11 个解决方案

#1

I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:

我以前遇到过这样的问题。我不认为tr可以直接进行边框样式化。我的工作是设计连续的tds:

<tr class="border_bottom">

CSS:

CSS:

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

#2

Add border-collapse:collapse to your table rule:

添加边框-折叠:折叠到您的表规则:

table { 
    border-collapse: collapse; 
}

Link

链接

#3

Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr

采用边沿塌陷:在台面和边沿底部塌陷:1pt纯黑色;在tr

#4

Use

使用

border-collapse:collapse as Nathan wrote and you need to set

边界崩溃:如内森所写的崩溃，你需要设置。

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

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

#5

There are lot of incomplete answers here. Since you cannot apply a border to tr tag, you need to apply it to the td or th tags like so:

这里有很多不完整的答案。由于您不能对tr标签应用边框，所以需要对td或th标签应用边框，如下所示:

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

Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the tr tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse property on the table element and set its value to collapse, like so:

这样做会在每个td之间留下很小的空间，如果您希望边界看起来像tr标记，那么这可能是不可取的。为了“填补空白”，您需要使用table元素上的border-collapse属性，并将其值设置为collapse，如下所示:

table {
  border-collapse: collapse;
}

#6

Display the row as a block.

将行显示为块。

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

and to display alternate colors simply:

并简单地显示其他颜色:

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

#7

Use

使用

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

Replace "thin solid" with CSS properties.

用CSS属性替换“thin solid”。

#8

I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...

我发现当使用这个方法时，td元素之间的空间在边界上形成了一个空隙，但是没有恐惧……

One way around this:

一个解决这个问题的办法:

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

With the CSS:

CSS:

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

#9

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

< td风格= " border-bottom-style:固体;边界底部:厚点# ff0000;" >

You can do the same to the whole row as well.

你也可以对整行做同样的处理。

There is border-bottom-style, border-top-style,border-left-style,border-right-style. Or simply border-style that apply to all four borders at once.

有border-bottom-style、border-top-style border-left-style border-right-style。或者仅仅是同时适用于所有四个边界的边界样式。

You can see (and TRY YOURSELF online) more details here

您可以在这里看到(并在网上尝试)更多的细节

#10

You can't put a border on a tr element. This worked for me in firefox and IE 11:

您不能在tr元素上设置边框。这在firefox和IE 11中对我很有效:

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

#11

HTML

HTML

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

CSS

CSS

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