HTML表格边框在IE10上不起作用答案

【问题标题】：HTML table border not working on IE10HTML表格边框在IE10上不起作用
【发布时间】：2015-01-03 10:28:03
【问题描述】：

您好，我的表格边框在 chrome 和 firefox 中工作正常，但在 IE 10 上运行时完全不正确。任何人请帮助我。谢谢

    <StdUI:GridView ID="gvSI" runat="server" AutoGenerateColumns="false" HideHeader="true"
                        HideFooter="true" Visible="False" OnRowDataBound="gvSI_RowDataBound">
      <Columns>
         <asp:TemplateField>
            <HeaderTemplate>
                <table class="style1" border="1" style="border-width: .05px; border-color: #C0C0C0;">
                   <tr>
                     <td rowspan="3" style="text-align: center">
                         End of Certificate Year
                      </td>
                      <td class="style2" colspan="5">
                         <btd>
                              Guaranteed
                       </td>
                      <td colspan="3" style="text-align: center">
                              Total Benefits&nbsp;
                       </td>
                    </tr>

                     <tr>
                        <td class="style2" rowspan="2">
                              Yearly Contribution
                        </td>
                        <td class="style2" rowspan="2">
                                    Wakalah Fee
                        </td>
                        <td colspan="3" style="text-align: center">
                                   PRF
                        </td>
                        <td rowspan="2" style="text-align: center">
                                  Death Benefit (Nonaccidental cause)
                        </td>
                        <td class="style2" rowspan="2">
                                  Death Benefit (Accidental cause)
                        </td>
                        <td class="style4" rowspan="2">
                                      Surrender Value
                        </td>
                   </tr>
                    <tr>
                      <td class="style5">
                          Death Benefit (Non- accidental cause)
                      </td>
                      <td class="style2">
                            Death Benefit (Accidental cause)
                      </td>
                      <td class="style2">
                                Surrender Value
                      </td>
                   </tr>
             </table>
        </HeaderTemplate>
      <ItemTemplate>
 <table class="style1" border="0" style="border-width: 1px; border-color: #C0C0C0;" cellpadding="0" cellspacing="0">
 <tr>
<td style="text-align: center" width="30" >
 <asp:label ID="Label1" runat="server" Text='<%# Eval("Col1") %>'>
      </asp:label> </td>
<td style="text-align: center" width="70">
 <asp:label ID="Label2" runat="server" Text='<%# Eval("Col2","{0:n2}") %>'>
      </asp:label> </td>
<td style="text-align: center" width="35">
 <asp:label ID="Label3" runat="server" Text='<%# Eval("Col3","{0:n2}") %>'>
      </asp:label> </td>
<td style="text-align: center" width="50">
 <asp:label ID="Label4" runat="server" Text='<%# Eval("Col4","{0:n2}") %>'>
      </asp:label> </td>
<td style="text-align: center" width="40">
 <asp:label ID="Label5" runat="server" Text='<%# Eval("Col5","{0:n2}") %>'>
      </asp:label> </td>
<td style="text-align: center" width="50">
 <asp:label ID="Label6" runat="server" Text='<%# Eval("Col6","{0:n2}") %>'>   
      </asp:label> </td>
<td style="text-align: center" width="55">
 <asp:label ID="Label7" runat="server" Text='<%# Eval("Col7","{0:n2}") %>'>  
      </asp:label> </td>
<td style="text-align: center" width="52">
 <asp:label ID="Label8" runat="server" Text='<%# Eval("Col8","{0:n2}") %>'>  
      </asp:label> </td>
<td style="text-align: center" width="76">
 <asp:label ID="Label9" runat="server" Text='<%# Eval("Col9","{0:n2}") %>'>  
      </asp:label> </td>
 </tr>
 </table>
         </ItemTemplate>
        </asp:TemplateField>

            </Columns>
                    </StdUI:GridView>

CSS 样式

<style type="text/css">
    .noborder
    {
        border: none;
    }
    .style1
    {
        width: 100%;
    }
    .style2
    {
        text-align: center;
    }
    .style4
    {
        width: 268435424px;
        text-align: center;
    }
    .style5
    {
        text-align: center;
        width: 219px;
    }

</style>

gridview 表的图像 (Chrome) http://postimg.org/image/rny32vgcx/

gridview 表的图像 (IE) http://postimg.org/image/zfe4esmnb/

【问题讨论】：

您使用了内联样式。而且您正在使用类 (class="style1") 。你在课堂上添加了一些边框样式吗？但是那些被内联样式覆盖了。
@Jawad Zeb 我需要做什么？
发布 class="style1" 代码。
使用您发送的图像，尝试将表格的 cellpadding 和 cellspacing 属性设置为 0。可能会有帮助。
查看我在@NgMunKeat 发布的答案

标签： html css asp.net gridview

【解决方案1】：

Your problem is in applying border color .IE does not applies border color because 
""The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.""

so the answer code is:

  <style type="text/css">
        .noborder {
            border: none;
        }

        .style1 {
            border-style: solid;
            border-right-color: #C0C0C0;
            border-bottom-color: #C0C0C0;
            width: 100%;
        }

        .style2 {
            text-align: center;
        }



        .style4 {
            width: 268435424px;
            text-align: center;
        }

        .style5 {
            text-align: center;
            width: 219px;
        }
        td {
            border-style: solid;
            border-right-color: #C0C0C0;
            border-bottom-color: #C0C0C0;


        }

    </style>



        <table class="style1" border="1" style="border-width: .05px;">
            <tr>
                <td rowspan="3" style="text-align: center">End of Certificate Year
                </td>
                <td class="style2" colspan="5">Guaranteed
                </td>
                <td colspan="3" style="text-align: center">Total Benefits&nbsp;
                </td>
            </tr>

            <tr>
                <td class="style2" rowspan="2">Yearly Contribution
                </td>
                <td class="style2" rowspan="2">Wakalah Fee
                </td>
                <td colspan="3" style="text-align: center">PRF
                </td>
                <td rowspan="2" style="text-align: center">Death Benefit (Nonaccidental cause)
                </td>
                <td class="style2" rowspan="2">Death Benefit (Accidental cause)
                </td>
                <td class="style4" rowspan="2">Surrender Value
                </td>
            </tr>
            <tr>
                <td class="style5">Death Benefit (Non- accidental cause)
                </td>
                <td class="style2">Death Benefit (Accidental cause)
                </td>
                <td class="style2">Surrender Value
                </td>
            </tr>
        </table>

        <table class="style1" border="0" style="border-width: 1px;">
            <tr>
                <td style="text-align: center" width="30">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Col1") %>'>
                    </asp:Label>
                </td>
                <td style="text-align: center" width="70">
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Col2","{0:n2}") %>'>
                    </asp:Label>
                </td>
                <td style="text-align: center" width="35">
                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Col3","{0:n2}") %>'>
                    </asp:Label>
                </td>
                <td style="text-align: center" width="50">
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("Col4","{0:n2}") %>'>
                    </asp:Label>
                </td>
                <td style="text-align: center" width="40">
                    <asp:Label ID="Label5" runat="server" Text='<%# Eval("Col5","{0:n2}") %>'>
                    </asp:Label>
                </td>
                <td style="text-align: center" width="50">
                    <asp:Label ID="Label6" runat="server" Text='<%# Eval("Col6","{0:n2}") %>'>   
                    </asp:Label>
                </td>
                <td style="text-align: center" width="55">
                    <asp:Label ID="Label7" runat="server" Text='<%# Eval("Col7","{0:n2}") %>'>  
                    </asp:Label>
                </td>
                <td style="text-align: center" width="52">
                    <asp:Label ID="Label8" runat="server" Text='<%# Eval("Col8","{0:n2}") %>'>  
                    </asp:Label>
                </td>
                <td style="text-align: center" width="76">
                    <asp:Label ID="Label9" runat="server" Text='<%# Eval("Col9","{0:n2}") %>'>  
                    </asp:Label>
                </td>
            </tr>
        </table>

mark as Answer if it solved your problem. Thanks :)

【讨论】：