在td上分配边框不起作用

Question

我想在td上应用边框，如下图所示

我尝试过如下

HTML

<tr>
        <td class="label black-border" style="font-family: Courier New; font-size: 120%;" colspan="2">
            Survey No :
        </td>
        <td class="field">
            <asp:TextBox ID="txtSurvey1" runat="server" Width="80%"></asp:TextBox>
        </td>
        <td class="label" style="font-family: Courier New; font-size: 120%;">
            Hissa No :
        </td>
        <td class="field">
            <asp:TextBox ID="txtHissa" runat="server" Width="80%"></asp:TextBox>
        </td>
    </tr>

CSS

.black-border
    {
        border: 1px solid #3A86D2;
    }
    .label
    {
        width: 20%;
    }

    .field
    {
        width: 30%;
    }

但是边框没有应用于td

Answer 1

将课程应用到tr这样的

<tr class="black-border">

然后有这样的CSS

tr.black-border td
{
   border-bottom: 1px solid #3A86D2;
   border-top: 1px solid #3A86D2;
}

tr.black-border td:first-child
{
   border-left: 1px solid #3A86D2;
}

tr.black-border td:last-child
{
   border-right: 1px solid #3A86D2 !important;
}

现在，您不需要在td上使用此类，就像当前代码一样，您必须从td中删除该类，并且必须仅将其添加到tr

Answer 2

你在这里遗失<table> ...检查一下： https://jsfiddle.net/maky/qv1y11k3/2/

.border {
  border: 1px solid #3A86D2;
}

Answer 3

有时您必须向表格本身添加border属性，即使它意味着内边框可见的0边框。

 
 <style>
 .black-border
    {
        border: 5px solid #F00;
    }
    .label
    {
        width: 20%;
    }

    .field
    {
        width: 30%;
    }
	</style>
<table border="0"> 
 <tr>
        <td class="label black-border" style="font-family: Courier New; font-size: 120%; "  colspan="2">
            Survey No :
        </td>
        <td class="field">
            <asp:TextBox ID="txtSurvey1" runat="server" Width="80%"></asp:TextBox>
        </td>
        <td class="label" style="font-family: Courier New; font-size: 120%;">
            Hissa No :
        </td>
        <td class="field">
            <asp:TextBox ID="txtHissa" runat="server" Width="80%"></asp:TextBox>
        </td>
    </tr>
</table>

如果你想根据你的照片想要整体。然后将class属性放在<tr class="black-border">中并将样式更改为

tr.black-border td
{
   border-bottom: 5px solid #F00;
   border-top: 5px solid #F00;
}

tr.black-border td:first-child
{
   border-left: 5px solid #F00;
}

tr.black-border td:last-child
{
   border-right: 5px solid #F00;
}