CSS: Horizontal scroll for each row in table - html

Question

I have the following markup(using AngularJS):
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<table class="col-sm-12 table-bordered">
<tbody>
<tr ng-repeat="grid in grids">
<td class="bold" style="text-align:center;width:10% !important"> {{grid.Left}}
<div>
({{grid.Count}})
</div>
</td>
<td style="width:90%">
<div stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}">
<svg style='height:200px'> </svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am planning to set the SVG's width dynamically according to the data passed to the angular directive 'stack-bar'.
As you can see each row in the table has a variable width multibar chart plotted using the angular directive.
The problem I am facing is that some rows may exceed the width of the table due to the SVG's(which is wrapped in the second 'td' of the row) width. Consequentially, I want such rows to have a individual horizontal scrollbars.
I tried setting a fixed width to each row and applied overflow-x: scroll to the second 'td' which contains the bar chart. But this doesn't work. Any suggestions on what I can do? Should I not use a table?

Answer 1

Well, turns out not using a table was a good idea. Here's the new markup:
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<div ng-repeat="grid in grids" class="row">
<div class="col-sm-2" style="padding-top:70px;text-align:center">
<div>
<span>{{grid.Left}}</span>
</div>
<div>
<span>({{grid.Count}})</span>
</div>
</div>
<div class="col-sm-10" stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}" style="overflow-x:scroll"> //scroll here
<svg style='height:200px'> </svg>
</div>
</div>
</div>
</div>
However, I would still like to see a solution with the table!