0

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 での結果:

ここに画像の説明を入力

だから... 2つの質問:

  • ColSpanIE が最初の行で実行しないのはなぜですか?
  • なぜborder-collapse: collapse;動作しないのですか?

(ほとんどのコードメッセージを投稿できないため、完全な HTML コードは書きません...)

4

1 に答える 1