Назначение границы через тд не работает

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

Иногда вам придется добавить границы свойство таблицы сам, даже если это означает, что граница 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; 
}