Home/ Questions/Q 9193129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:05:18+00:00

So I’ve got a table header that’s implemented using position:fixed in the stylesheet. I’d

  • 0

So I’ve got a table header that’s implemented using position:fixed in the stylesheet. I’d like to be able to have this header clipped by it’s surrounding div, however setting the overflow doesn’t cause it to be clipped when it’s width is greater than the width of the surrounding div. Any ideas?

The basic code is:

th {
  box-sizing: border-box;
  height: 46px;
}
<body>
  <div style="overflow: hidden; border: 5px solid black;width: 20%; height: 50%;">
    <table style="width: 1396px; position:fixed">
      <thead>
        <tr>
          <th style="width: 146px;">Name</th>
          <th style="width: 129px;">Company</th>
          <th style="width: 116px;">Address</th>
          <th style="width: 135px;">Spouse</th>
          <th style="width: 141px;">SSN</th>
        </tr>
      </thead>
    </table>
  </div>
</body>

I was thinking maybe applying a clip property to the table and then adjusting that with JS but no matter what clipping I try to put, the table just disappears. I had been using position:absolute and then adjusting that dynamically with javascript on scrolling, but that looks really laggy even though it does get proper clipping on the table from its parent div.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Fixed and absolutely-positioned elements are outside the page flow (on higher layers, you might say), and aren’t affected by other elements on the page.

    Put a fixed wrapper div around your content which acts as a fixed-width container.

    http://jsfiddle.net/e9vAA

    .page {
  width: 400px;
  margin: 0 auto;
}

.fixed {
  position: fixed;
  width: 400px;
  height: 80px;
  background-color: #eee;
}

th {
  box-sizing: border-box;
  height: 46px;
}
    <div class="page">
  <div class="fixed">
    <table width="100%">
      <thead>
        <tr>
          <th style="width: 46px;">Name</th>
          <th style="width: 29px;">Company</th>
          <th style="width: 16px;">Address</th>
          <th style="width: 35px;">Spouse</th>
          <th style="width: 41px;">SSN</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
    • 0