избегать перекрытия столбца в таблице размера html - PullRequest
Новая
       14

избегать перекрытия столбца в таблице размера html

0 голосов
/ 25 марта 2020

Я создал таблицу html с изменяемым размером, используя javascript, и я хочу установить минимальную ширину каждого столбца, чтобы она не была go внутри или перекрывала другой столбец во время изменения размера и переноса текста. Вот мой столик enter image description here

<table id="myTable" class="table__body  ">
                    <thead>
                        <!--THE EMPTY LIST ITEM WAS CREATED FOR MANGING DROPING OTHER ITEMS TO INDEX ZERO-->
                        <tr class="table__header flex bb--mutted">
                            <th class="table__header--barrier max--height left 0" id="0" style="position: relative; width: 85px;">
                            <div class="columnSelector" style="top: 0px; right: 0px; width: 5px; position: absolute; cursor: col-resize; user-select: none; height: 130px;"></div><div class="columnSelector" style="top: 0px; right: 0px; width: 5px; position: absolute; cursor: col-resize; user-select: none; height: 143px;"></div>
                            </th>

        <!--FILTER SVG + LINKED FUNCTION-->

    <!-- end ngIf: !field.splitable -->
                                    <!-- ngIf: field.splitable -->
                                </div><!-- end ngIf: !vm.isRestrictedField(field) -->
                                <!--<div class="table-minwidth-container block"
                                     ng-style="{'width' : vm.minTableWidth + 'px'}"
                                     on-scroll-end="vm.loadMoreListItems()" on-scroll-end-threshold="0">
                                    <div class="tablePlaceholder"></div>
                                </div>-->

                        </tr>
                    </thead>
                    <tbody>

                        <tr id="rec_0d57e854-bc9b-493d-81b0-5f64a1a7085c" class="table__listItem flex cell ng-scope hoverable" ng-class="{'hoverable':!context.dataItem || !context.dataItem.onEditMode || !context.selectedItems, 'editMode': (listItem.itemGuid == context.dataItem.itemGuid || listItem.itemGuid.createContentType) &amp;&amp; listItem.onEditMode}" ng-repeat="listItem in context.dataItems track by $index" ng-style="{'width' : vm.minTableWidth + 'px'}" style="width: 6975px;">

                            <td id="0" class="0" style="width: 85px;" nowrap="">
                            </td>

                            <td style="white-space: nowrap; width: 288px;" id="1" class="1" ng-repeat="sc in vm.tableFields | mtvTableFieldsFilter | orderBy: 'order' track by sc.id" nowrap="">

                            </td>
                            <td style="white-space: nowrap; width: 302px;" id="2" class="2" ng-repeat="sc in vm.tableFields | mtvTableFieldsFilter | orderBy: 'order' track by sc.id">

                            </td>
                            <td style="white-space:nowrap" id="3" class="3" ng-repeat="sc in vm.tableFields | mtvTableFieldsFilter | orderBy: 'order' track by sc.id">

                            </td>
                            <td style="white-space:nowrap" id="13" class="13" ng-repeat="sc in vm.tableFields | mtvTableFieldsFilter | orderBy: 'order' track by sc.id">

                            </td>
                    </tbody>
                </table>
...