2013-08-07 192 views
0

我想畫我的表格的邊框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代碼,因爲我不能發佈主要是代碼的消息...)

+0

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

+0

我在帖子的底部寫道,我沒有發佈我所有的HTML代碼,我可以告訴你我的列數是相同的每一行;) – Shadam

+0

那麼你說html代碼不是asp代碼有一個很大的區別,你已經添加了x6後,我評論 – Pete

回答

1

我創建了一個基於您的方案這個提琴:http://jsfiddle.net/YVEsJ/1/

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

你得到意想不到的結果的原因可能是因爲一些額外的CSS風格的地方。從我上面鏈接的小提琴開始,然後在你的風格上向上工作。

更好的是,我建議你創建一個普通的HTML table而不是服務器端控件(asp:table)。這是因爲服務器端控件吐出了可能會覆蓋你的CSS的額外的HTML屬性。如果需要,可以在單元格內部使用服務器端控件。最好還是用spanrunat="server"

+0

明白了,謝謝,你讓我走上了正道!我在'

'上設置了'border-collapse:collapse;',並且我已經爲colspan的'.drawBorder th,td'類削減了'width:80px;'。現在一切正常。再次感謝 ! – Shadam

+0

很高興爲您服務。 :) – Abhitalks