在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; 
}