How to avoid a th element from inheriting properti

2019-08-27 16:04发布

站内文章 / HTML/CSS
6 0 0

问题:

I've got a table which has a repeating background image on the header:

thead tr
{
   border-collapse:collapse;
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

And this works across in both Firefox and Internet explorer, but if we want certain column headers to show the sorting direction we decorate the th with the class Sorted and the Direction. And use css to to add a direction icon.

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left;  
     padding-left: 0.6em;   
  }
  thead th.Sorted.Ascending
  {
     background-image: url(images/background-table-sorted-column-ascending.gif);
  }
  thead th.Sorted.Descending
  {
     background-image: url(images/background-table-sorted-column-descending.gif);
  }

The problem is that in Internet Explorer 6 and 7 the background-color from the tr is inherited (found out using Internet Explorer Developer Toolbar) to the th. Which means the th paints #D3D2D2 color over the tr background. Firefox, Chrome and IE8 do not have this problem, so it's a IE6/7 bug I suspect. I thought about using a background-color:transparant on the thead th.Sorted but IE6/7 just paints the body background (it looks like it cuts a hole in the other layers between the body and the th).

This is how it should look like:

And this is how it looks like in IE6 and IE7:

Below is the HTML snipppet I created for this question.

  <table cellspacing='0'>
    <thead>
      <tr>
        <th>First column</th>
        <th>Second column</th>
        <th class="Sorted Ascending">Third column</th>
        <th>Fourth column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

How could I solve this?

回答1:

It seems IE has a bug - it renders the tr's background image as the cell's background image, so the cell's image overrides the row's image. The same bug exists for the thead element, but it seems to work well with the table element.
So, you can apply your background image to the table instead of the header row:

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

Because the background image is on the table it may extend beyond the header row, so you may also want to set the background color of the tbody or its trs:

tbody
{
   background-color: #fff;
}


回答2:

That is odd... because this works just fine (though I am not using images, it should be the same no?

<html>
<head>
    <style type="text/css">
    thead tr{
        background-color:#000;
                    color: #fff;
    }
    th.sorted.Ascending{
        background-color:#fff;
                    color: #000;
    }
    th.sorted.Descending{
        background-color:#AAA;
    }

    </style>
</head>
<body>
    <table>
        <thead>
          <tr>
            <th>First column</th>
            <th>Second column</th>
            <th class="Sorted Ascending">Third column</th>
            <th>Fourth column</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
          </tr>
        </tbody>
    </table>
</body>
</html>

//Edit// You might want to do this instead:

background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;


回答3:

It looks like a bug in IE. I tried it without background image for the cell: 

thead tr
{
   border-collapse:collapse;
   background-image:url(http://www.freefoto.com/images/1223/09/1223_09_1---Big-Blue-Sky--Montana--USA_web.jpg);
   background-color:gray;
}

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left; /** this line changes the position! */  
     padding-left: 0.6em;   
  }

, and the backround image is repositioned on that cell! I guess IE renders the row's background one cell at a time.
You'd may have to add another element in the cell for that.

Ok, Another idea:
It seems to be working ok if you put the background image on the table element. thead is also buggy. you can try including them both (table and tr), by adding the rule:

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}


标签： html cross-browser css
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~