CODEWITHSUNDEEP
htmlcss
Zoltán Tamási
Zoltán Tamási

Reputation: 12809

Is it possible to clip a table column?

I'd like to achieve something like this.

table > tbody > tr > td:nth-child(2) {
  clip: rect(0px, 10px, 100px, 0px);
}

It is ment to "hide" the first 10px of the third column of a table.

At first try this was not working, even with setting table-layout: fixed. Is it possible to solve this somehow?

I'd like to experiment with this technique to implement fixed columns with "virtual" horizontal scrolling.

Upvotes: 0

Views: 451

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

tip from my comment

  • use an extra container and use negative to reduce virtually its width to none but kept in the flow.
  • give a padding or a width to your td.

it seems you want to show only a portion of 10px width

approach selecting clipping from the left

table > tbody > tr > td:nth-child(2) div {
  margin: 0 -999px 0 -10px;
  /* here -10px brings element in padding area of td and shows the first 10 px , to clip at 10px instead 0px do -20px idem for top margin */
  max-height: 100%;/* eventually & overflow:hidden ? */
  color:white
}
table > tbody > tr > td:nth-child(2) {
  padding-left: 10px;
  background: purple;
  overflow: hidden;
}
table > tbody > tr > td {
  background-color: orange;
}
/* example new clipping coordonates */
table + table > tbody > tr > td:nth-child(2) div {
  margin: -0.2em -999px 0 -3.75em;
}
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>

approach selecting clipping from the right

table > tbody > tr > td:nth-child(2) div {
  float: right;
  margin: 0 0 0 -9999px;
  color: white
}
table > tbody > tr > td:nth-child(2) {
  padding-left: 10px;
  background: purple;
  overflow: hidden;
}
table > tbody > tr > td {
  background-color: orange;
}
/* example new clipping coordonates */

table + table > tbody > tr > td:nth-child(2) div {
  margin: 0 -20px 0 -9999px;
}
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

dogwoodtree-dot-net
dogwoodtree-dot-net

Reputation: 274

The CSS provided actually targets the second column, not the third. 

table > tbody > tr > td:nth-child(2) {
  clip: rect(0px, 10px, 100px, 0px);
  background-color: purple;
  
}
table > tbody > tr > td {
  background-color: orange;
}
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>Second Column</td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/u6pvf6wL/

Clip has been deprecated and replaced by clip-path. Please check http://caniuse.com/#search=css%20clip-path - you may not want to pursue this path if you need to support IE in all its delightful quirkiness. The syntax for clip-path is slightly different. You can find examples documented here: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path.

(Embrace the new clip-path option, clip is only applied to absolutely positioned elements. Managing a table with absolutely positioned td's sounds like a world of hurt. While I love CSS-only solutions, this is really a great use-case for a little javascript.)

Upvotes: 0

Related Questions