CODEWITHSUNDEEP
htmlcsshtml-table
aaronstacy
aaronstacy

Reputation: 6428

Positioning element on right side of table header

I'd like to have a little handle on the right side of my tables that can be used for resizing the column. I've got some relatively clean CSS and markup that seems to do the trick (fiddle):

HTML:

<table>
  <thead>
    <tr>
      <th>
        <span class=resize> </span>
        <div class=label>
          Column 1
        </div>
      </th>
      <th>
        <span class=resize> </span>
        <div class=label>
          Column 2
        </div>
      </th>
    </tr>
  </thead>
</table>

CSS:

table thead th {
  position: relative;
}

table thead th .resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}

This seems to work great in WebKit and IE 8, but fail miserably in Firefox.

How do I make this work in Firefox as well?

Upvotes: 1

Views: 1968

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157314

You need to give a container div inside your th element and use position: relative; on the container div

Demo

Explanation: The effect of position: relative on table elements is undefined in CSS 2.1 Spec, so in order to get your thing work, use a wrapping div inside your th element and assign position: relative; to that div

HTML

<table>
  <thead>
    <tr>
      <th>
          <div class="container">
        <span class="resize"> </span>
        <div class="label">
          Column 1
        </div>
          </div>
      </th>
      <th>
          <div class="container">
        <span class="resize"> </span>
        <div class="label">
          Column 2
        </div>
           </div>
      </th>
    </tr>
  </thead>
</table>

CSS

table thead th {
  position: relative;
}

.container {
position: relative;
}

table thead th span.resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}

Upvotes: 1

aaronstacy
aaronstacy

Reputation: 6428

the quick answer seems to be just wrapping the contents of the header cell in a div:

HTML:

<table>
  <thead>
    <tr>
      <th>
        <div class=wrapper>
          <span class=resize> </span>
          <div class=label>
            Column 1
          </div>
        </div>
      </th>
      <th>
        <div class=wrapper>
          <span class=resize> </span>
          <div class=label>
            Column 2
          </div>
        </div>
      </th>
    </tr>
  </thead>
</table>

CSS

table thead th .wrapper {
  position: relative;
}

table thead th .resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}

http://jsfiddle.net/NVYJK/1/

Upvotes: 0

Related Questions