扩展边框的表格却切掉背景图片。

Question

我在这里创建了一个fiddle，展示了我的问题： http://jsfiddle.net/tpSjf/ 我想给表格的行添加边框，但是只有行有边框，现在边框使得表格的宽度增加了2像素，所以我将宽度设置为938像素。这样可以解决宽度问题，但会截断页眉中的一部分图像。

由于背景是图片，溢出似乎不起作用。

你可能会想知道为什么我没有直接为整个表格设置边框，因为它有圆角和背景图片，如果设置了整个表格的边框，就会出现“魔鬼角”，因为角落是透明的。

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 上展开输出

- Adam

---

有必要使用固定宽度和背景图片吗？这会限制表格的使用。我将其转换为CSS渐变，并使用边框半径和100％宽度，使其更加灵活。http://jsfiddle.net/Th2Ls/ - cjd82187

问题在于它需要与IE8兼容，而我的设计师很烦人，他要给它加上纹理。 - Adam

我使用的最后一个渐变滤镜 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8a000', endColorstr='#e86200',GradientType=0 ); /* IE6-9 */ 应该仍然有效。在IE8中，如果不使用类似于http://css3pie.com/这样的东西，圆角将无法工作。但是，如果用户使用的是IE8，并且他们可能拥有较慢的计算机，他们甚至不会知道他们错过了圆角效果，只会加载更多的垃圾内容。 - cjd82187

CSS3pie不支持部分圆角，只能是全部四个或者没有，这真的很遗憾，否则我可以使用它。实际上，我已经在网站的其他地方使用了它。 - Adam

Answer 1

我已经对它进行了一些调整。

我改变了th的宽度，并添加了以下CSS。

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

这使得表格显示方式符合您的要求。

以下是更新后的jsfiddle。

如果这对您有用，请告诉我。

编辑：我将行的显示设置为块，并将表格的宽度增加了2像素。应该可以了。（抱歉回复晚了）

- Sander Koedood

---

我已经进行了编辑。现在应该可以了 :) 如果对您有用，请告诉我。 - Sander Koedood

Answer 2

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

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;
}

编辑：

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

- PoseLab

---

我喜欢这个解决方案，但它似乎在Firefox或IE中无法运行。 - Adam

这个代码是有效的，但是背景图片无法显示，因为我上传图片的网站不允许。我修改了jsFiddle并将图片放在了Flickr上，请再次检查。 - PoseLab

Answer 3

如何将所有的边框设置为1像素和透明？然后只需更改.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;
    }
}

这是一个包含HTML代码的句子，表示“这里有一个 jsFiddle ”。

- Mathijs Flietstra

---

太棒了，虽然我做了一些更改使其在IE8中工作！ http://jsfiddle.net/NT3cW/3/ - Adam

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;
}

请检查一下...

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

- Raymond

Answer 5

好的，边框在表格外面

所以没有办法像表头内部比其余部分大2px那样做

相反，我真的建议使用CSS3来实现相同的效果，请在此处查看：

关键部分是：

border-radius
background-position

http://jsfiddle.net/Rzc7F/

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

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

第一个元素将是包含标题的div/image/table（最好是div）

第二个元素将是类似于您在fiddle中的表，只是没有橙色标题

- Jacek Pietal

Answer 6

我已经通过简单的更改更新了你的代码片段，

这是fiddle链接。

background-size: 938px 44px;

只需要这一个更改就可以了。

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

如果您创建另一个tr/td，并将class=orange_header和border=0分配给它，则可以解决问题，但某些浏览器（IE）可能会有异常情况。

我希望这能给您带来积极的见解。

- MarmiK

Answer 7

我同意poselab的观点。虽然我做了一些更改使表格可以扩展；例如每行单元格的左右将有边框，而不仅仅是具有.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;}

- Jennift

Answer 8

有人已经建议使用csspie，我知道，而且已经说明不支持IE8以不同方式圆角处理每个角。这可能有些棘手（http://css3pie.com/documentation/known-issues/），但是它是受支持的。您尝试使用简写符号了吗？

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

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

- ph33nyx