如何在 Visual Basic ASP.NET WEB APPLICATION 程序中向表中添加网格线答案

【问题标题】：How to add grid lines to a table in a Visual Basic ASP.NET WEB APPLICATION program如何在 Visual Basic ASP.NET WEB APPLICATION 程序中向表中添加网格线
【发布时间】：2014-08-22 04:14:16
【问题描述】：

我想在左侧显示一列问题，在右侧显示一列答案，并希望在所有垂直线和水平线之间出现网格线。我打算使用 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>

【问题讨论】：

CSS: table, th, td { border: 1px solid black; }
我试过了，但没用。也许我没有正确添加它。（见上文）

标签： html css asp.net html-table

【解决方案1】：

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

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

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

【讨论】：

哎呀。这为目标表添加了边框，但它也为我的所有 HTML 表添加了边框。我只想要一张桌子周围的边框。