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

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

不确定这是否是您要查找的内容，我刚才遇到了同样的问题。在玩弄 CSS 并寻找答案之后。我相信这是 Edge 的边缘情况，它会导致表格使用 table-layout:fixed; 和 width:100;

错误呈现

我仍然不确定这是如何为我解决问题的，但将表格的宽度明确设置为自动似乎可以解决问题。