边框扩大表，但切断的背景图像

我已经创建了我的问题的小提琴的小提琴这里： 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输出，如果您的显示器不够宽，看问题

来源

2013-05-09 Adam

有为什么它需要有一个固定的宽度和有背景图像的原因是什么？这实际上限制了你可以对表格做什么。我将它转换为css渐变，并使用border-radius和100％宽度，使其更具多功能性。 http://jsfiddle.net/Th2Ls/ – cjd82187 2013-05-22 22:19:18

问题是它需要与IE8一起工作，而我的设计师很烦人，他希望它具有纹理 – Adam 2013-05-23 07:54:10

最后一个用于渐变的滤镜我使用了'filter：progid： DXImageTransform.Microsoft.gradient（startColorstr ='＃e8a000'，endColorstr ='＃e86200'，GradientType = 0）;/* IE6-9 * /'仍然可以工作。圆角在不使用类似http://css3pie.com/的情况下不会在IE8中工作，但是，如果用户在IE8上的电脑速度较慢，并且甚至不知道他们是谁，那么您只需加载越来越多的垃圾无论如何，缺少圆角。 – cjd82187 2013-05-23 13:00:44

如何只在所有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-29 08:04:47

辉煌，虽然我做了一些改变，所以它在IE8中工作！ http://jsfiddle.net/NT3cW/3/ – Adam 2013-05-29 10:36:25

我尽力。 ..

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-09 10:47:58 Raymond

嗯，边框表

以外所以没办法做它像内部表中的标题是2px的比其他人

istead大，我真的建议使用CSS3在这里实现同样的效果检查：

个

的重要部分是：

border-radius 
background-position

http://jsfiddle.net/Rzc7F/

我想，这看起来就像你想

这种方法的选择是这个表拆分为两个元素

首先将是包含标题的div /图像/表格（最好是div）

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

来源

2013-05-23 22:59:33 Prozi

我有一个简单的修改更新你的小提琴，

这里是fiddle

background-size: 938px 44px;

只

这一个改变将会做..

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

周围的工作在那里，如果你创建另一个TR/TD，你指定类= orange_header和边境= 0，如果可以与又有些borwser（IE）将有异常工作..

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

来源

2013-05-28 11:23:12 MarmiK

我一直在摆弄它一下。

我已经改变了个的的宽度，和我已经添加了下面的CSS

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

这使得该表显示我想你想要的方式。

这里是更新jsfiddle

让我知道这已经摸索出适合你。

编辑：我给了行一个显示块，并添加了2 px的表宽度。这应该做到这一点。（对于迟到的回复感到抱歉）

来源

2013-05-28 15:54:51

几乎！但它似乎并没有在Firefox中工作 – Adam 2013-05-28 16:02:24

我做了一个编辑。这应该现在做:)让我知道它是否适合你。 – 2013-05-29 09:51:42

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

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

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

来源

2013-05-28 18:37:42 ph33nyx

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

来源

2013-05-28 23:57:18 PoseLab

我喜欢这个解决方案，但它似乎并没有在Firefox或IE – Adam 2013-05-29 07:42:06

工作，但无法看到背景图片，因为我上传图片的网站不允许。我更改了jsFiddle，并将图像放在Flickr中。再次检查 – PoseLab 2013-05-29 09:19:13

我同意poselab。我做了一些改变，使表格可以扩展;因为例如td的每一行都会有左右边界而不是只有行。替代的风格和以及一些改变你的头，所以你可以在两者之间添加更多的列，而不改变图形的大小：

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-29 04:09:27 Jennift

边框扩大表，但切断的背景图像

回答

相关问题