css - 如何解决边缘浏览器中的表格布局固定问题？

问题描述

在这里，我遇到了边缘浏览器的问题。使用表格布局：修复了它在 Firefox 和 chrome 浏览器中的工作正常。

我的情况就像我有下表：

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal vlc-slds-table" ng-init=digestOnResize() ng-if="set.length">
    <thead>
        <tr class="slds-text-title_caps slds-text-heading--label">
            <th width="20px" ng-style="{'padding':'0px'}"></th>
             <th scope="col" ng-repeat='ctrl in set' ng-hide='!ctrl.displayInView'>
                <div class="slds-truncate">{{::ctrl.eleArray[0].propSetMap.label}}</div>
            </th>
            <th width="70px"/>
        </tr>
    </thead>
    <tbody class='vlc-slds-block_table-body'>
        <tr>
            <td>
                <span class="vlc-asterix icon-v-asterix vlc-editblock-asterix" ng-if="isEditBlockRecordInvalid($index, this)"></span>
            </td>
            <td class='vlc-slds-block_table-body__td' data-label='{{::child.eleArray[0].propSetMap.label}}' ng-repeat='child in children = control.children' ng-hide='!child.displayInView'>
                <form name="editblockform" 
                      class="vlc-slds-edit-block__form" 
                      ng-if='child.eleArray[0].propSetMap.hide||(!child.eleArray[0].propSetMap.show || evaluateShow(child.eleArray[0], this))'
                      ng-include="'vlcEditBlockDetailCont.html'">
                </form>
            </td>
            <td data-label='{{::customLabels.OmniEditBlockTableMenu}}'>
                <div class="vlc-slds-edit-block--button-menu">
                    <slds-dropdown content="[]" template-url="vlcEditBlockDropdown.html"></slds-dropdown>
                </div>
            </td>
        </tr>
    </tbody>
 </table>

我正在为此使用css，如下所示：

.slds-table slds-table--bordered {
   table-layout: fixed; 
 }
table td, .via-slds .slds-table th {
    padding: .25rem .5rem;
    white-space: nowrap;
    position: relative;
}

它在 chrome 浏览器中运行良好，如下图所示：

但它不适用于边缘浏览器，其显示如下：

有人可以帮助我指导我如何解决它吗？

标签： css

不确定这是您要找的东西，我刚才遇到了同样的问题。在玩弄CSS并寻找答案之后。我相信这是 Edge 的一个边缘情况，它会导致表格无法正确呈现，table-layout:fixed;并且width:100;

我仍然不确定这如何为我解决这个问题，但明确地将桌子上的宽度设置为自动似乎可以解决问题。

css - 如何解决边缘浏览器中的表格布局固定问题？

问题描述

解决方案

推荐阅读