Question

在这里，我遇到了边缘浏览器的问题。使用表格布局：修复了其在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浏览器中工作正常，如下图所示：

但未在边缘浏览器上应用，其显示如下：

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

Answer 1

不确定这是您要查找的内容吗，我刚才遇到了同一问题。在玩Role { _id, name } User { _id, email, password, role: { _id, name } }并寻找答案之后。我认为这是Edge的一种极端情况，它会导致使用CSS和table-layout:fixed;

错误地渲染表格

我仍然不确定如何解决此问题，但是将表的宽度显式设置为auto似乎可以解决此问题。

如何解决边缘浏览器中表格布局已修复的问题？

1 个答案: