put an element into table cell without losing overflow scroll

Question

I have a table which contains a cell with a long line. I want this line to be scrollable but when I put exactly this element into the table it loses the scroll.

I expect 2 scrolls on the page but only the non-table copy of the text is scrollable.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  overflow-x: hidden;
}

table {
  max-width: 100%;
  border-collapse: collapse;
  background-color: #ff0000;
}

table td,
table th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #32383e;
}

tbody {
  background-color: #00ff00;
}

.code {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

    <div class="main">
        <table class="codetable">
            <tbody>
                <tr>
                    <td class="linenos">
                        <div class="linenodiv">
                            <pre>1
2
3
</pre>
                        </div>
                    </td>
                    <td class="code">
                        <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>
                    </td>
                </tr>
            </tbody>
        </table>

        <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>

    </div>

https://jsfiddle.net/kheg1v6p/

If it's not possible within tables, then how can I achieve this effect?

• numbered lines
• some lines being very long
• the second column (the first is line numbers) should be scrollable (while keeping line numbers visible - the number lines should behave like sticky in CSS)

Answer 1

Edit: Add sticky first column.

table {
  position: relative;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table td:first-of-type {
  background-color: red;
  position: sticky;
  left: 0;
}

table {
  position: relative;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table td:first-of-type {
  background-color: red;
  position: sticky;
  left: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
}

.left {
  width: 50vw;
}

.right {
  white-space: nowrap
}

table {
  max-width: 100%;
  border-collapse: collapse;
  background-color: #ff0000;
}

table td,
table th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #32383e;
}

tbody {
  background-color: #00ff00;
}

.code {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

<div class="main">
  <div class="left">
    <table class="codetable">
      <tbody>
        <tr>
          <td class="linenos">
            <div class="linenodiv">
              <pre>1
2
3
</pre>
            </div>
          </td>
          <td class="code">
            <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>
          </td>
        </tr>
      </tbody>
    </table>

    <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>
  </div>

  <div class="right">
    <span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </span>
  </div>

</div>