Table horizontal scroll

Table with horizontal scroll with fixed columns at the begin and the end of the table.

HTML

<body>
  <div id="outerdiv">
   <div id="innerdiv">
    <table>
        <tr>
            <th class="headcol"></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg height="32" width="48"><line x1="24" y1="32" x2="24" y2="21" stroke="#444" stroke-width="2"></line><text x="24" y="14" fill="#444" text-anchor="middle" ng-show="textTag">1</text></svg></div></th>
<th><div style="width:16px;"><svg...

CSS

body {
        font:16px Calibri;
        margin: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    svg{
        margin-left:-16px;
    }
    svg.last{
        margin-left:0px;
    }
    td {
        margin:0;
        white-space:nowrap;
        border: 1px solid #C0C0C0;
    }
    #outerdiv {
        /*background-color: orange;*/
    }
    #innerdiv {
        /*background-color: red;*/
        margin-right: 2em;
        overflow-x:scroll;
        margin-left: 3em;
        overflow-y:visible;
        
    }
    .headcol {
        position:absolute;
        width:3em;
        left:0;
        border-right: none;
        border-bottom: none;
        border-left: none;
    }
    .headcolEdit{
        position:absolute;
        width:2em;
        right:0;
        border-left: none;
        border-bottom: none;
    }
    .long {
        /*background:yellow;*/
        text-align: center;
        font-family: monospace;
    }