如何將網格線添加到Visual Basic ASP.NET WEB應用程序中的表中

Question

我想在左側顯示一列問題，在右側顯示一列答案，並希望在所有垂直和水平線。 我打算使用TABLE來管理問題和答案控件（文本和圖像）。

如何在每一行之間以及每一列之間得到一條細細的黑線？

這裏是我的應用程序的代碼的.aspx

.auto-style4 { 
     width: 800px; 
    } 


     <table class="auto-style4"> 
      <tr> 
       <td class="auto-style14">What goes on the bun first?</td> 
       <td class="auto-style15">cheeseburger</td> 
       <td class="auto-style16">&nbsp;</td> 
      </tr> 

我想這種變化，從下面的建議，但沒有奏效。

 .auto-style4 { 
     width: 800px; 
     table, th, td { border: 1px solid black; } 
    } 

---

之後加入解決方案，但這種附加的邊框ALL TABLES

.auto-QUESTION_TABLE 
{ 
    width: 800px; 
     border-collapse: collapse; 
} 

.auto-QUESTION_TABLE th, td 
{ 
    border: 1px solid black; 
}  .auto-style5 { 
      font-weight: normal; 
     } 
     .auto-style_hhmm_promise { 
      width: 500px; 
     } 
     .auto-style7 { 
      font-weight: normal; 
      width: 4px; 
     } 
     .auto-style9 { 
      font-weight: normal; 
      width: 54px; 
     } 
     .auto-style11 { 
      width: 200px; 
     } 
     .auto-style13 { 
      width: 281px; 
     } 
     .auto-style14 { 
      width: 433px; 
     } 
     .auto-style15 { 
      width: 127px; 
     } 
     #MediaPlayer { 
      width: 498px; 
      height: 346px; 
     } 
     .auto-style16 { 
      font-size: small; 
     } 
    h3 
    {margin-top:12.0pt; 
    margin-right:0in; 
    margin-bottom:3.0pt; 
    margin-left:0in; 
    line-height:115%; 
    page-break-after:avoid; 
    font-size:13.0pt; 
    font-family:"Cambria","serif"; 
    } 
    </style> 

...

 <table class="auto-QUESTION_TABLE"> 
      <tr> 
       <td class="auto-style14">What goes on the bun first?</td> 
       <td class="auto-style15">cheeseburger</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">What is this?<asp:ImageButton ID="ImageButton2" runat="server" Height="52px" ImageUrl="~/cheeseburger.jpg" Width="61px" /> 
       </td> 
       <td class="auto-style15">crow bar</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14" style="background-color:gray;">How do I open a frozen bun</td> 
       <td class="auto-style15"> 
        <asp:ImageButton ID="ImageButton4" runat="server" Height="57px" ImageUrl="~/pickles.gif" Width="79px" /> 
       </td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">Which has more wisdom:&nbsp; The President or a cheeseburger</td> 
       <td class="auto-style15"> 
        <asp:ImageButton ID="ImageButton3" runat="server" Height="52px" ImageUrl="~/cheeseburger.jpg" Width="61px" /> 
       </td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14"> 
        What goes on the bun first?</td> 
       <td class="auto-style15">The President a</td> 
       <td class="auto-style15"> 
        <asp:Button ID="Button12" runat="server" Text="OK" /> 
       </td> 
      </tr> 
      <tr> 
       <td class="auto-style14"> 
        &nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">&nbsp; &nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style14">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
       <td class="auto-style15">&nbsp;</td> 
      </tr> 
     </table> 

Answer 1

.auto-style4 
{ 
    width: 800px; 
    border-collapse: collapse; 
} 

.auto-style4 th, .auto-style4 td 
{ 
    border: 1px solid black; 
} 

http://jsfiddle.net/coliveira/UZ9gW/