Question

我在IE8中设置TH最后一个孩子的样式时遇到了困难。

请在这里找到小提琴。 http://jsfiddle.net/archanabr05/yokLbocx/

问题是：我想在标题单元格之间创建一个白色边框，但要避免使用最后一个标题单元格。

所以我用过：

CSS：

th:last-child {
 border-right:none;
}

我知道这在IE8中不起作用，我们是否有任何解决方案可以解决它，jquery也适合我。

我没有固定列。因此我无法根据固定数量的单元格进行样式化。

Answer 1

您可以使用Selectivizr来执行此操作。 Selectivizr是一个为旧浏览器模拟CSS3伪类的实用程序，如I6 / 7/8

Answer 2

使用:first-child - http://caniuse.com/#feat=css-sel2

＆＃13;

.table{
    border-spacing: 0;
    border:2px solid #e5e5e5;
    border-collapse: collapse;
}
tr th{
}
th{
    padding:30px;
    background:#e5e5e5;
    border-left: 2px solid #fff;
}
th:first-child{
    border-left: none;
}
td {
    
    border-right: 2px solid #e5e5e5!important;
    border-top: 1px solid #e5e5e5!important;
    padding: 30px;
    background:#fff
}

＆＃13;

<table class="table">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
    </tr>
    <tr>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
    </tr>
</table>

＆＃13;

Answer 3

:first-child（which is a nice compatible solution）的另一种替代方法是使用相邻边框的相邻兄弟选择器（+符号及其has excellent support）。您的代码将如下所示：

.table{
    border-spacing: 0;
    border:2px solid #e5e5e5;
    border-collapse: collapse;
}
tr th{
}
th{
    padding:30px;
    background:#e5e5e5;
}
th + th{
    border-left:2px solid #fff;
}
td {
    
    border-right: 2px solid #e5e5e5!important;
    border-top: 1px solid #e5e5e5!important;
    padding: 30px;
    background:#fff
}

<table class="table">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
    </tr>
    <tr>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
    </tr>
</table>

Answer 4

使用jQuery：

ImageRequest

Answer 5

你可以做一个简单的黑客攻击。

在最后一个中放入一个类名，并在ie.css中写入它的css（仅在IE中加载）

要仅在IE中加载CSS文件，您可以使用这样的条件语句。

<!--[if lte IE 9]>
    <link rel="stylesheet" href="./css/ie.css">
    <![endif]-->

CSS可以是这样的。

th.last-child {
  border-right: none;
}

因此，通过这种方式，您无需加载另一个第三方jquery插件来执行相同的操作。

：last-child在IE8中不起作用

5 个答案: