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 :

enter image description here

result on chrome :

enter image description here

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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -