0

我想在 HTML 页面上绘制表格的边框：

HTML：

<asp:Table>
    <asp:TableRow CssClass="columnHeader">
        <asp:TableCell BorderWidth="0px" BackColor="White"></asp:TableCell>
        <asp:TableCell ColumnSpan="3" ><asp:Label ID="lbl_Dimension" runat="server" >Dimension in CM</asp:Label></asp:TableCell>
        <asp:TableCell ColumnSpan="2" ><asp:Label ID="lbl_Weight" runat="server" >Weight in KG</asp:Label></asp:TableCell>
        <asp:TableCell ><asp:Label ID="lbl_Volume" runat="server" >Volume</asp:Label></asp:TableCell>
    </asp:TableRow>
    <asp:TableRow CssClass="columnHeader">
        <asp:TableCell BorderWidth="0px" BackColor="White"></asp:TableCell>
        <asp:TableCell ><asp:Label /></asp:TableCell> (x6)
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell CssClass="rowHeader"><asp:Label ID="lbl_Pallet" runat="server" >Pallet</asp:Label></asp:TableCell>
        <asp:TableCell ><asp:Label /></asp:TableCell> (x6)
    </asp:TableRow>
    <asp:TableRow >
        <asp:TableCell CssClass="rowHeader"><asp:Label ID="lbl_Master" runat="server" >Master</asp:Label></asp:TableCell>
        <asp:TableCell ><asp:Label /></asp:TableCell> (x6)
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell CssClass="rowHeader"><asp:Label ID="lbl_Inner" runat="server" >Inner</asp:Label></asp:TableCell>
        <asp:TableCell ><asp:Label /></asp:TableCell> (x6)
    </asp:TableRow>  
</asp:Table>

CSS：

.drawBorder table
{
    border: 0 solid Black;
    border-spacing: 0;
    margin-top: 30px;
    border-collapse: collapse;
}
.drawBorder th, .drawBorder td
{
    border: 1px solid Black;
    width: 80px;
}
.rowHeader
{
    background-color: #f4e8d0;
    font-weight: bold;
}
.columnHeader
{   
    text-align: center;
    background-color: #f4e8d0;
    border: 1px solid Black;
    font-weight: bold;
}

IE 上的结果：

在此处输入图像描述

在 Chrome 上的结果：

在此处输入图像描述

所以......两个问题：

  • 为什么 IE 不在ColSpan我的第一行执行？
  • 为什么border-collapse: collapse;不起作用？

（我没有编写完整的 HTML 代码，因为我不能发布大部分代码消息......）

4

1 回答 1

1

我根据您的场景创建了这个小提琴：http: //jsfiddle.net/YVEsJ/1/

它在 IE 和 Chrome 上看起来完全一样。border-collapse按预期工作。

您得到意外结果的原因可能是因为某处有一些额外的 css 样式。从我上面链接的小提琴开始，然后在你的风格上向上工作。

更好的是，我建议您创建一个纯 HTMLtable而不是服务器端控件 (asp:table)。这是因为服务器端控件会吐出额外的 HTML 属性，这些属性可能会覆盖您的 css。如果需要，请在单元格内使用服务器端控件作为标签。最好还是使用 plain spanwith runat="server"。

于 2013-08-07T13:36:43.027 回答