html - CSS:表格中每一行的水平滚动

Question

我有以下标记(使用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>

我计划根据传递给 Angular Directive(指令)“stack-bar”的数据动态设置SVG 的宽度。

如您所见，表格中的每一行都有一个使用 angular 指令绘制的可变宽度多条形图。

我面临的问题是，由于 SVG(包含在该行的第二个“td”中)的宽度，某些行可能会超过表格的宽度。因此，我希望这些行有一个单独的水平滚动条。

我尝试为每一行设置固定宽度，并将 overflow-x: scroll 应用于包含条形图的第二个“td”。但这不起作用。关于我能做什么有什么建议吗？我不应该使用表格吗？

Answer 1

好吧，事实证明不使用表格是个好主意。这是新标记:

<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>

但是，我还是希望看到这个表的解决方案!