Question

我有一个Bootstrap 4表，其中每个条目包含两行。问题是我希望每行的宽度都不同：

第一行包含一个下拉菜单和两个日期选择器。我希望它们以6：3：3的比例显示，所以我使用了col- *。

第二行有两个跨度和一个文本区域。我使用了col-4和col-8，以便它们的宽度比为4：8。我在每个元素上都使用了“ d-flex”类。

如您所见，在使用col- *设置d-flex和列宽之后，我得到的显示是错误的。如何使表格正确显示，每行具有单独的列宽？

<table id="mDataTable" data-cols-num="5" class="table" aria-describedby="mDataTable_info">
                            <thead>
                                <tr class="search-cols" style="display: none;" role="row"></tr>
                                <tr class="actions-row" role="row">
                                    <td class="header-action-row" style="border:none; cursor:default;" colspan="11">
                                        <h6 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.ListOfLodging</h6>
                                        <div class="action-images pull-right">
                                            <div class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add" data-bind="click: newItemAdded() == false? mainDataAdd : null, css:{'icon-disabled':newItemAdded() == true}, style:{cursor: newItemAdded() == false ?'pointer' :'not-allowed' }"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th data-bind="click: function () {mainDataRefreshData(1,1)}, css: mainDataRoomIcon">@SharedResources.Index.Room</th>
                                    <th data-bind="click: function () {mainDataRefreshData(1,5)}, css: mainDataMoveInIcon">@SharedResources.Index.MovingInDate</th>
                                    <th data-bind="click: function () {mainDataRefreshData(1,6)}, css: mainDataMoveOutIcon">@SharedResources.Index.MovingOutDate</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tr data-bind="visible: mainData() == null || mainData().length < 1">
                                <td data-bind="attr: { 'colspan': 11 }"> <div class="alert alert-warning" role="alert"> @SharedResources.Index.NoData</div></td>
                            </tr>
                            <tbody data-bind="foreach: mainData">
                                <tr class="d-flex" data-bind="click :$parent.mainDataSelectRow.bind($data,$index()), style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' },
                                            css: { 'row-selected': $parent.mainDataSelectedRowPosition() != null && $index() == $parent.mainDataSelectedRowPosition() && ForDelete() == false, 'for-delete': ForDelete() == true  } ">
                                    <td class="col-6" data-bind="attr : {'disabled' : (ForDelete() == true || CanEdit() == false)}, event:{ change: $parent.mainDataModified} ">
                                        <select class="form-control input-sm" id="RoomId" data-bind="style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' },
                                                value : RoomId,
                                                options: $parent.lodgingRoomSelectList,
                                                optionsText: 'Text',
                                                optionsValue: 'Value', attr : {'disabled' :  (ForDelete() == true || CanEdit() == false)}, event:{ click: $parent.mainDataModified}"></select>
                                    </td>
                                    <td class="col-3" style="position:relative;">
                                        <div class="date datetimepicker">
                                            <input type="text" id="MoveIn" class="form-control" data-bind="dateTimePicker: MoveInDate , minDate: CanEdit() == false? null: ID() < 1?  $parent.minMoveOutDateForNewItem() : $parent.maxMoveOutDate() > MoveOutDate() || MoveOutDate() == null? $parent.maxMoveOutDate() : $parent.prewMaxMoveOutDate() , maxDate: MoveOutDate,event:{ 'dp.change': $parent.mainDataModified} , attr : {'disabled' :  (ForDelete() == true || CanEdit() == false) }, style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' } ">
                                        </div>
                                    </td>
                                    <td class="col-3" style="position:relative;">
                                        <div class="date datetimepicker">
                                            <input type="text" id="MoveOutDate" class="form-control" data-bind="dateTimePicker: MoveOutDate, minDate: MoveInDate() == 'undefined' || MoveInDate() == null? $parent.minMoveOutDateForNewItem() : MoveInDate, maxDate: ID() <1? null : $parent.maxMoveOutDateForSecondItem(), event:{ 'dp.change': $parent.mainDataModified} , attr : {'disabled' :  (ForDelete() == true || CanEdit() == false) }, style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' } ">
                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr class="d-flex" data-bind="click :$parent.mainDataSelectRow.bind($data,$index()),
                                            css: { 'row-selected': $parent.mainDataSelectedRowPosition() != null && $index() == $parent.mainDataSelectedRowPosition() && ForDelete() == false, 'for-delete': ForDelete() == true }, style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' } ">
                                    <td class="col-4">
                                        <span data-bind="text: Lodging"></span><br/><br/>
                                        <span data-bind="text: LodgingSize"></span>
                                    </td>
                                    <td class="col-8">
                                        <textarea class="form-control" rows="4" form="Remark" data-bind="value: Remark, event:{ click: $parent.mainDataModified} , attr : {'disabled' : (ForDelete() == true || CanEdit() == false)}"></textarea>
                                    </td>
                                    <td class="action-column">
                                        <div class="row-delete fa fa-share icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.mainDataUndoRemove, visible: ForDelete() == true"></div>
                                        <div class="row-delete fa fa-minus-circle" title="Obriši" data-bind="click: CanDelete() == true && $parent.active() != '3'? $parent.mainDataRemove:  null, visible: (ForDelete() == false), css:{'icon-disabled':CanDelete() == false || $parent.active() == '3'}, style:{cursor: CanEdit() == true ?'pointer' :'not-allowed' }" style="color: #9E0101;"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

具有不同列宽的表格行-Bootstrap 4

0 个答案: