html - 如何在 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; }
    }

---

在添加解决方案之后，但这为所有 表添加了边框

.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/