我想在 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 代码,因为我无法发布大部分代码消息...)
最佳答案
我根据您的场景创建了这个 fiddle :http://jsfiddle.net/YVEsJ/1/
它在 IE 和 Chrome 上看起来完全一样。 border-collapse
按预期工作。
你得到意想不到的结果的原因可能是因为某处有一些额外的 css 样式。从我上面链接的 fiddle 开始,然后按照你的风格向上工作。
更好的是,我建议您创建一个纯 HTML table
而不是服务器端控件 (asp:table)。这是因为服务器端控件吐出额外的 HTML 属性,这些属性可能会覆盖您的 css。如果需要,在标签的单元格内使用服务器端控件。最好还是使用普通的 span
和 runat="server"
。
关于asp.net - 绘制 HTML 表格边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18103603/