asp.net - Draw HTML table border -
i want draw border of table on html page :
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; }
result on ie :
result on chrome :
so... 2 questions :
- why ie doesn't
colspan
on first row ? - why
border-collapse: collapse;
doesn't work ?
(i don't write complete html code because can't post code message...)
i created fiddle based on scenario: http://jsfiddle.net/yvesj/1/
it looks same on ie , chrome. border-collapse
works intended.
the reason getting unintended results may because of css style somewhere. start fiddle linked above , work way upwards on styles.
better still, suggest create plain html table
instead of server-side control (asp:table). because server-side controls spit out html attributes may override css. use server-side controls inside cells labels if required. better still use plain span
runat="server"
.
Comments
Post a Comment