3

我在这里的小提琴中创建了我的问题的小提琴：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 上展开输出

4

8 回答 8

1

我一直在摆弄它。

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

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

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

这是更新的jsfiddle

让我知道这是否适合您。

编辑：我给了行一个显示块，并在表格的宽度上添加了 2 px。这应该这样做。（回复晚了非常抱歉）

于 2013-05-28T15:54:51.247 回答
1

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

编辑：

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

于 2013-05-28T23:57:18.500 回答
1

只是设置所有的边界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

于 2013-05-29T08:04:47.603 回答
0

我已经尽力了...

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

检查这个..

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

于 2013-05-09T10:47:58.987 回答
0

好吧，边框在桌子外面

所以没有办法做到这一点，因为表格内的标题比其他的大 2px

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

重要的部分是：

border-radius
background-position

http://jsfiddle.net/Rzc7F/

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

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

首先是包含标题的 div/image/table（最好是 div）

第二个元素是你小提琴中的表格，只是没有橙色标题

于 2013-05-23T22:59:33.277 回答
0

我用一个简单的改变更新了你的小提琴，

这里是fiddle 

background-size: 938px 44px;

只有这个改变会做..

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

如果您创建另一个 tr/td 并在其中分配 class=orange_header 和border=0，那么解决方法就在那里，如果这可能再次适用于某些浏览器（IE）将有异常..

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

于 2013-05-28T11:23:12.093 回答
0

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

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

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

于 2013-05-28T18:37:42.273 回答
0

我同意poselab。Tho，我做了一些更改以使表格可扩展；例如，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;}
于 2013-05-29T04:09:27.503 回答