When displaying syntax in a code element, how can I apply scrollbars if a line of syntax is longer than the view?
I’ve tried overflow: scroll, but it doesn’t seem to work how I want it.

As you can see in the picture, overflow causes the browser to scroll horizontal.

To see live demo, check out https://blog.sltech.no/Stein/Article/1

HTML:

<table class="syntax-content-wrap">
    <tr>
        <td class="line-nr-wrap"><span class="nr">6</span></td>
        <td class="syntax-line-wrap"><pre><code>    public DefaultRoute(string controller, string action) : base(Feature.DefaultRoute)</code></pre></td>
    </tr>
</table>   

Sass/CSS:

table.syntax-content-wrap {
    line-height: 1;
    margin-left: 7px;
    margin-top: 11px;

    & td.line-nr-wrap {
        vertical-align: middle;
        width: 44px;

        & > span.nr {
            font-size: 11px;
            font-weight: bold;
        }
    }

    & td.syntax-line-wrap {
        overflow: scroll;
        
        & > pre {
            display: block;
            margin: 0px;

            & > code {
            }
        }
    }
}