How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables

table row background image

If you want it across each row, why not make it the table background instead and repeat it in the y-axis?

table {
    width: 300px;
    background-image: url('mypic.jpg');
    background-repeat: repeat-y;
}

BTW I tested your code with IE9, FF12 - those are showing the image once per row. But Chrome 15 & Safari 5 is repeating it for each td.

Edit

Since you only wanted it in the first-row, you should use background-position to make sure the image stays at the top of the table (that's usually where the first row is, right? :P)

table {
    width: 300px;
    background-image: url('mypic.png');
    background-repeat: no-repeat;
    background-position: center top;
}

CSS/WebKit: Background Images for Table Row

Will your table always only have two rows? Such as:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

If so, a simple, but not overly elegant, solution would be to split your background image into two images, and apply a CSS class to the left and right column, applying half of the arrow to the right side of the left column, and to the left side of the right column:

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

Your CSS could then be similar to:

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

You could also use a sprite image where you use one image and position it differently for the two backgrounds.

I realize it's probably not the most ideal solution, but it would at least fix your issue and get your project moving. I sometimes use simple solutions such as this in order to make forward progress, and then revisit the problem to make it more efficient later.

Chrome table glitch when cells have rowspan and colspan

It sure sounds like chrome bug.

Have you considered using table-row-group?

thead { 
  display: table-row-group 
}

This will remove the repetition of table headers at page breaks.

Hope it helps, cheers!

Table background color gives illusion of colored border

Add padding: 0 to td and display: block; to img like this

Updated fiddle

.samples td {
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
    box-shadow: 0 0 0 2px #fff;
    padding: 0;
}
.samples td img{
    display: block;
    width: 100%;
    height:400px;
    z-index: 50;
}

Sample snippet

.samples {

 width: 100%;

 background-color: white;

 z-index:50;

}

.samples table{

 position: relative;

 width: 100%;

}

.samples td {

 text-align: center;

 width: 30%;

 height:300px;

 position:relative;

 table-layout: fixed;

 background-color: rgb(0,300,300);

 box-shadow: 0 0 0 2px #fff;

  padding: 0;

}

.samples td img{

  display: block;

 width: 100%;

 height:400px;

 z-index: 50;

}

.samples td:hover img{

 opacity: .5;

}

.samples p{

 margin: 0;

 position:absolute;

 left: 0;

 top: 50%;

 right:0;

 color: #fff;

 font-size: 20px;

 text-align: center;

 z-index:10;

}

.samples td:hover p{

 visibility: visible;

}

.samples td p{

 visibility: hidden;

}

<div class="samples">

  <table>

    <th>Pokemon</th>

    <tr>

      <td>

        <p>Go Mustangs! Unfortunately, there's not much to cheer for...</p>

        <img src = "http://walnuthighschoolfootball.com/wp-content/uploads/2013-Clare_IMG_0257.jpg">

      </td>

      <td>

        <p>Hiking on Walnut's hilly Schabarum trail is a change from the Evanston pancake metropolis!</p>

        <img src = "http://nobodyhikesinla.files.wordpress.com/2011/04/hiking-2011-4-236.jpg">

      </td>

      <td>

        <p>Orange you hungry for a tangerine? Give me three and I'll give you a show</p>

        <img src = "http://juicyjuicevapor.com/wp-content/uploads/2015/07/tangerines.jpg">

      </td>

    </tr>

    <tr>

      <td>

        <p>My favorite place to nap</p>

        <img src = "https://upload.wikimedia.org/wikipedia/commons/4/4e/Deering_Library_detail_Northwestern.jpg">

      </td>

      <td>

        <p>As a NU Quidditch beater/chaser, I enjoy dodging balls and scoring through hoops.</p>

        <img src = "https://pbs.twimg.com/profile_images/513804815088885761/08UB6aL2.jpeg">

      </td>

      <td>

        <p>Have never played a game as great as Last of Us. The graphics are so realistic, and online multiplayer mode is v fun.</p>

        <img src = "http://media.aintitcool.com/media/uploads/2013/nordling/thelastofus.jpg">

      </td>

    </tr>

  </table>

</div>

How to make repeating-linear-gradient for a table continue seamlessly over multiple cells?

This is a confirmed bug in Chrome. Given that it was first reported in 2010 (when Gecko actually had the same bug) and is currently marked WONTFIX I wouldn't hold my breath for a real fix. You could open a new bug, it might be 'doable' now.

As a workaround: put the stripes on the table so as not to confuse the rendering mechanisms, then instead of styling the rows 'to be striped', unstyle the other rows, like this:

table.striped {
  background: repeating-linear-gradient(
        45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #DDDDDD 10px,
        #DDDDDD 20px
  );
}
tr:not(.striped) {
  background:white; /* or any color that would normally be behind the table */
}

This way it still works as if you're highlighting only the indicated row as you intend. If for some reason there is a non-opaque background behind the unstyled rows you're probably flat out of luck because of this bug.

Updated codepen. Works identically in IE, FF and Chrome without 'hickups'.

Fit image to table cell [Pure HTML]

Inline content leaves space at the bottom for characters that descend (j, y, q):

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

There are a couple fixes:

Use display: block;

<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

or use vertical-align: bottom;

<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

Adding image inside table cell in HTML

This worked for me:-

 <!DOCTYPE html> 
  <html>
  <head>
<title>CAR APPLICATION</title>
 </head>
 <body>
<center>
    <h1>CAR APPLICATION</h1>
</center>

<table border="5" bordercolor="red" align="center">
    <tr>
        <th colspan="3">ABCD</th> 
    </tr>
    <tr>
        <th>Name</th>
        <th>Origin</th>
        <th>Photo</th>
    </tr>
    <tr>
        <td>Bugatti Veyron Super Sport</th>
        <td>Molsheim, Alsace, France</th>
                <!-- considering it is on the same folder that .html file -->
        <td><img src=".\A.jpeg" alt="Sample Image" border=3 height=100 width=300></img></th>
    </tr>
    <tr>
        <td>SSC Ultimate Aero TT  TopSpeed</th>
        <td>United States</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td>Koenigsegg CCX</th>
        <td>Ängelholm, Sweden</th>
        <td border=4 height=100 width=300>Photo1</th>
    </tr>
    <tr>
        <td>Saleen S7</th>
        <td>Irvine, California, United States</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td> McLaren F1</th>
        <td>Surrey, England</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td>Ferrari Enzo</th>
        <td>Maranello, Italy</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td> Pagani Zonda F Clubsport</th>
        <td>Modena, Italy</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
</table>
  </body>
  <html>

---

Related Topics