그리기 HTML의 표 테두리

Question

나는 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 :

크롬에

결과:

그래서 ... 두 질문 :

• 왜 IE 내 첫 번째 행에 ColSpan을하지 않는 이유는 무엇입니까?
• 왜 border-collapse: collapse;이 작동하지 않습니까? http://jsfiddle.net/YVEsJ/1/

  은 그냥 보이는 :

Answer 1

(나는 주로 코드 메시지를 게시 할 수 없기 때문에 내가 ... 내 완전한 HTML 코드를 작성하지 않음) 나는 당신의 시나리오에 따라이 바이올린을 만들어 IE와 Chrome에서도 동일합니다. border-collapse은 의도 한대로 작동합니다.

의도하지 않은 결과가 나오는 이유는 어딘가에 약간의 CSS 스타일이 있기 때문일 수 있습니다. 위에 링크 된 피들 (fiddle)에서 시작하여 자신의 스타일을 상향 조정하십시오.

더 나은 방법은 서버 쪽 컨트롤 (asp : table) 대신 일반 HTML table을 만드는 것이 좋습니다. 이것은 서버 측 컨트롤이 CSS를 무시할 수있는 추가 HTML 속성을 유출하기 때문입니다. 필요한 경우 셀 내부의 서버 측 컨트롤을 사용하여 레이블을 만듭니다. 보통 span을 runat="server"으로 사용하는 것이 더 좋습니다.