绘制HTML表格边框

我想画我的表格的边框HTML页面上：绘制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：

enter image description here

结果在Chrome：

enter image description here

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

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

（我不写我完整的HTML代码，因为我不能发布主要是代码的消息...）

来源

2013-08-07 Shadam

你的表是全错的 - 表中的每一行的列数不匹配 – Pete

我在帖子的底部写道，我没有发布我所有的HTML代码，我可以告诉你我的列数是相同的每一行;） – Shadam

那么你说html代码不是asp代码有一个很大的区别，你已经添加了x6后，我评论 – Pete

我创建了一个基于您的方案这个提琴：http://jsfiddle.net/YVEsJ/1/

它看起来只是在IE和Chrome上也是如此。 border-collapse按预期工作。

你得到意想不到的结果的原因可能是因为一些额外的CSS风格的地方。从我上面链接的小提琴开始，然后在你的风格上向上工作。

更好的是，我建议你创建一个普通的HTML table而不是服务器端控件（asp：table）。这是因为服务器端控件吐出了可能会覆盖你的CSS的额外的HTML属性。如果需要，可以在单元格内部使用服务器端控件。最好还是用span与runat="server"。

来源

2013-08-07 13:36:43 Abhitalks

明白了，谢谢，你让我走上了正道！我在'

'上设置了'border-collapse：collapse;'，并且我已经为colspan的'.drawBorder th，td'类削减了'width：80px;'。现在一切正常。再次感谢！ – Shadam

很高兴为您服务。 :) – Abhitalks

绘制HTML表格边框

回答

相关问题