как обрезать фиксированную таблицу большей ширины в div внутри его контейнера div

Question

, поэтому мне нужно установить фиксированный tr, чтобы он завис при прокрутке вниз, все работало и прекрасно, но TR, который я замораживаю, переполняет страницу и выходит из таблицы.

я создал контейнер с фиксированнымширина, но я не могу заставить таблицу отображать столько же, сколько ширина контейнера

это базовый пример, если кто-то может помочь

body{
  height: 900px;
}

.fixedhead{
  background:red;
  position:fixed;
  top: 0px;
}

.container{
  width: 100px;
  overflow-x: hidden;
}
.container.blue{
  background: blue;
}

<div class="container">
  <div class="fixedhead">
    <table>
      <tr>
        <td>Some very long text here,</td>
        <td>bigger than the container div</td>
        <td>but it should only show as much as the container div</td>
        <td>and still be fixed to the top</td>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
      </tr>
     </table>
    </div>
  </div>
<br>
<hr>
<br>
<div class="container blue">
it should only show upto here
</div>

Спасибо всем

Answer 1

Просто укажите width до .fixedhead и укажите overflow-x:auto. Должно работать как положено