邊框擴大表，但切斷的背景圖像

我已經創建了我的問題的小提琴的小提琴這裏： 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

邊框擴大表，但切斷的背景圖像

回答

相關問題