在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%; 
 
    } 
 
\t </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>

如果你想整个按您的画面。然后把阶级属性的<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; 
}