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指令'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>

但是，我仍然希望看到这个表的解决方案！

CSS：表格中每行的水平滚动

1 个答案: