Border expanding table but cutting off background image

Border expanding table but cutting off background image

I have created a fiddle of my problem in a fiddle here: http://jsfiddle.net/tpSjf/

I'm adding a border on the table, but only for the rows, now the border expands the width of the table by 2px so I've made the width 938px. This correct the width problem but cuts off part of the image in the header.

Overflow doesn't seem to work as it is a background.

You may be wondering why I haven't just set the border for the whole table, well as its rounded corners and a background image it gets 'devil horns' as the corners are transparent.

Example HTML

      
          
Name
          
Email
          
Last Login
          
Options
      
      
          
Example name
          
Example Email
          
Examlpe Email
          
Edit
      
  
  

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

Please expand the output on jsfiddle if your monitor is not wide enough to see the problem

Answer by Raymond for Border expanding table but cutting off background image

I tried my best...

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

Check this..

I think you should change ur background-image size..

Answer by Prozi for Border expanding table but cutting off background image

Well, the borders are outside of table

so there is no way of doing it like the header inside table is 2px bigger than the rest

istead, I'd really suggest using css3 to achieve the same effect check here:

the vital parts are:

border-radius  background-position  

http://jsfiddle.net/Rzc7F/

I think this looks just like you wanted

The alternative to this approach is to split this table into two elements

first would be a div/image/table (preferrably div) containing the header

and the second element would be the table like in your fiddle, just without the orange header

Answer by MarmiK for Border expanding table but cutting off background image

I have updated your fiddle with a simple change,

here is the fiddle

background-size: 938px 44px;  

only this one change will do..

Note: this is CSS3 property, for CSS2 or for support in old browser you have to edit the image and set the size.., as the property available will not support in all the browsers,except latest browsers.

The work around are there if you create another tr/td where you assign class=orange_header and border=0 if that may work with again some borwser (IE) will have exception..

I hope this will give you positive insights..

Answer by Sander Koedood for Border expanding table but cutting off background image

I've been fiddling around with it a bit.

I've changed the widths of the th's, and I've added the following CSS

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

This has made the table display the way I think you want it.

Here is the updated jsfiddle

Let me know if this has worked out for you.

Edit: I gave the row a display block and added 2 px to the width of the table. This should do it. (sorry for the late response)

Answer by ph33nyx for Border expanding table but cutting off background image

Someone already suggested csspie, I know, and it was stated that there was no support for IE8 to round each corner differently. It can be tricky (http://css3pie.com/documentation/known-issues/), but it is supported. Did you try using the shorthand notation?

For all CSS properties which PIE parses, only the shorthand versions of those properties will be recognized. For example, while border-radius is supported, the individual longhand border-top-left-radius etc. properties are not.

Thus, border-top-right-radius:10px; will not work, but border-radius:0 10px 0 0; will work. You may also need to add the -pie-border-radius:0 10px 0 0;

Answer by PoseLab for Border expanding table but cutting off background image

This is the old problem with backgrounds in tr. The solution is to not use borders. You have to create a 1x1 pixel image with the border color of the table. The problem is that you can not apply a background image to a tr because it would apply to each td of tr. So you have to apply the background image of 1x1 to the first and the last td. You can see the result in the 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;  }  

EDIT:

You can improve it so that the table works with any width. To do this, you will need to create 3 images for the header one for the first th, one for the th of the middle and one for the last th. You can not use css selectors like :last-child because it does not work in IE8 but you can use :first-child

Answer by Jennift for Border expanding table but cutting off background image

i agree with poselab. Tho, I did some changes to make the table expandable; for eg every single row of td will have border left and right instead of just the rows with .alternate styles and as well as some changes to your header so you can add more columns in between without changing the size of graphic:

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

Answer by Mathijs Flietstra for Border expanding table but cutting off background image

How about just setting the borders on all tr's to be 1px and transparent? And then just change the color of the border on .alternate. That seems to fix it on Chrome. Firefox and IE still need the background-image to be moved to the left by 1px to line things up.

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

Here's a jsFiddle

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72