Question

我在这里用小提琴创造了一个小问题： http://jsfiddle.net/tpSjf/

我在表格上添加了一个边框，但仅限于行，现在边框会将表格的宽度扩展2px，所以我的宽度为938px。这样可以纠正宽度问题，但会切断标题中的部分图像。

溢出似乎不起作用，因为它是一个背景。

您可能想知道为什么我不仅仅为整个桌子设置边框，以及它的圆角和背景图像，因为角落是透明的，它会变成“魔鬼角”。

示例HTML

<table class="table_style orange_header" class="ajax_table" style="font-size:12px;">
    <tr>
        <th style="width:248px;">Name</th>
        <th style="width:314px;">Email</th>
        <th style="width:237px;">Last Login</th>
        <th style="width:75px;">Options</th>
    </tr>
    <tr class="alternate">
        <td><a href="#">Example name</a></td>
        <td>Example Email</td>
        <td>Examlpe Email</td>
        <td><a href="#">Edit</a><a class="crossbtn" href="#"></a></td>
    </tr>
</table>

CSS示例

table { border-collapse:collapse; border-spacing:0; table-layout: fixed; }

.table_style {
    width: 938px;
    overflow:visible;
}
th {
    height: 45px;
}
.alternate {
    height: 50px;
    background-color: #f0f0f0;
    border-left: #888 1px solid;
    border-right: #888 1px solid;
}
.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat;
}

如果你的显示器不够宽，无法看到问题，请扩展jsfiddle的输出

Answer 1

我一直在摆弄它。

我已经改变了th的宽度，并且我添加了以下CSS

tr {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   display: block;
}

这使得表格显示我认为您想要的方式。

以下是更新后的jsfiddle

请告诉我这是否适合您。

编辑：我给了一行显示块，并在表格的宽度上加了2个px。这应该做到这一点。（对不起迟到的回复）

Answer 2

这是tr中背景的老问题。解决方案是不使用边框。您必须使用表格的边框颜色创建1x1像素图像。问题是您无法将背景图像应用于tr，因为它将应用于tr的每个td。因此，您必须将1x1的背景图像应用于第一个和最后一个td。你可以在小提琴中看到结果：

http://jsfiddle.net/poselab/EF8TW/

.alternate{
height: 50px;
    background: #F0F0F0
}
.alternate .first{
    background: url(http://farm4.staticflickr.com/3766/8876247477_be36f613d0_o.gif) repeat-y 0 0;
}
.alternate .last{
    background: url(http://farm4.staticflickr.com/3766/8876247477_be36f613d0_o.gif) repeat-y right 0;
}

修改

您可以对其进行改进，以使表格适用于任何宽度。为此，您需要为第一个th的标题创建3个图像，一个用于中间的th，另一个用于最后th。您不能使用:last-child之类的css选择器，因为它在IE8中不起作用，但您可以使用:first-child

Answer 3

如何将所有tr的边框设置为1px和transparent？然后只需更改.alternate上边框的颜色。这似乎在Chrome上修复了它。 Firefox和IE仍然需要background-image将1px移到左侧以便排队。

.table_style {
    width: 940px;
    overflow:visible;
}
tr {
    border-left: transparent 1px solid;
    border-right: transparent 1px solid;
}
.alternate {
    height: 50px;
    background-color: #f0f0f0;
    border-color: #888;
}
.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat;
    background-position: -1px 0px;
}
/* Below is for Chrome, Safari 3+, Opera 9.26-/14+ only, 
   it sets the background-image's left offset back to 0px. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .orange_header {
        background-position: 0px 0px;
    }
}

这是 jsFiddle

Answer 4

我尽了最大努力......

http://jsfiddle.net/tpSjf/1/

.table_style {
    width: 938px;
    overflow:hidden;
    display: table-cell;
}

.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat;
    background-size: 701px 55px;
}

检查一下..

我认为你应该改变你的背景图像大小..

Answer 5

嗯，边界在桌子之外

因此没有办法像表格中的标题比其余标题大2px。

相反，我真的建议使用css3来实现相同的效果检查：

关键部分是：

border-radius
background-position

http://jsfiddle.net/Rzc7F/

我认为这看起来就像你想要的那样

此方法的替代方法是将此表拆分为两个元素

首先是包含标题

的div / image / table（最好是div）

并且第二个元素就像你的小提琴一样，只是没有橙色标题

Answer 6

我通过简单的更改更新了你的小提琴，

这是fiddle

background-size: 938px 44px;

只有这一个改变才能做到。

注意：这是CSS3属性，对于CSS2或旧浏览器中的支持，您必须编辑图像并设置大小..，因为除最新浏览器外，所有浏览器都不支持可用属性。

如果你创建了另一个tr / td，你可以在那里分配class = orange_header和border = 0，如果可以再次使用某些borwser（IE）会有异常..

我希望这会给你积极的见解..

Answer 7

有人已经建议csspie，我知道，并且有人表示不支持IE8以不同的方式围绕每个角落。它可能很棘手（http://css3pie.com/documentation/known-issues/），但它受到支持。你尝试过使用速记符号吗？

对于PIE解析的所有CSS属性，只能识别这些属性的简写版本。例如，虽然支持border-radius，但单独的longhand border-top-left-radius等属性不是。

因此，border-top-right-radius：10px;不起作用，但border-radius：0 10px 0 0;将工作。您可能还需要添加-pie-border-radius：0 10px 0 0;

Answer 8

我同意poselab。所以，我做了一些改动，使桌子可以扩展;例如，td的每一行都会有左边框和右边框，而不仅仅是带有.alternate样式的行，以及对标题的一些更改，这样你就可以在不更改图形大小的情况下添加更多列：

http://jsfiddle.net/jennift/eEQEh/

.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_bac ground_zps47f8dbe4.png) no-repeat top;}

.leftside {
    background:#FFF url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat 0 0;}

.rightside {
    background:#FFF url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat right 0;}

td:first-child {
    background: url(http://i.stack.imgur.com/iYfYI.gif) repeat-y 0 0;}

td:last-child {
    background: url(http://i.stack.imgur.com/iYfYI.gif) repeat-y right 0;}

边界扩展桌，但切断背景图像

8 个答案: