CODEWITHSUNDEEP
htmlcss
Takayuki Sato
Takayuki Sato

Reputation: 1043

In a table with fixed left column, the fixed column doesn't derive parent style

I'm trying to make a table with first column fixed, and it worked. ( how do I create an HTML table with fixed/frozen left column and scrollable body? )

However, some of styles are not applied to the fixed column even if its parent node does.

For example, 

.even {
  background-color: #c0c0c0;
}
.fixed-col {
  position: absolute;
  left: 0;
  width: 50px;
}
table {
  margin-left: 50px;
}
<div style="position:relative;">
  <div style="overflow-x:scroll">
    <table>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="odd">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>
  </div>
</div>

it looks like this enter image description here.

I want to make the fixed columns' background color striped as other columns. How can I fixed this?

Upvotes: 0

Views: 39

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can update your selector to select the td themselves.

Absolute or fixed positionned element are not in the flow anymore and tr will only wrap the td that remains in the flow.

Added a border to the table, tr will not be drawn outside of it.

.even td {
  background-color: #c0c0c0;
}
.fixed-col {
  position: absolute;
  left: 0;
  width: 50px;
}
table {
  margin-left: 50px;
  /* let's see where table stands (so trs and tds in the flow */
  border:solid;
}
<div style="position:relative;">
  <div style="overflow-x:scroll">
    <table>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="odd">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: 2

Starscream1984
Starscream1984

Reputation: 3062

As your even class just adds the background colour, why not use it on the fixed cells as well as the parent?

<tr class="even">
    <td class="fixed-col even">a</td>
    <td>b</td>
    <td>c</td>
</tr>

Upvotes: 1

Related Questions