iview table添加border后出现横向滚动条

Question

vue2项目里ivew table在添加一个border属性后会导致强行出现一个横向滚动条

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

解决方法：使用CSS的OVERFLOW属性来设置BORDER不会影响DIV的宽度。例如：

<DIV V-IF="TABLEWIDTH > 0">
    <TABLE CLASS="TABLE">
        <THEAD>
            <TR>
                <TH>HEADER</TH>
                <TH>FOOTER</TH>
            </TR>
        </THEAD>
        <TBODY>
            <!-- YOUR DATA HERE -->
        </TBODY>
    </TABLE>
</DIV>

<STYLE SCOPED>
    .TABLE {
        WIDTH: 100%;
        OVERFLOW-X: AUTO;
    }
</STYLE>

<SCRIPT>
EXPORT DEFAULT {
  NAME: 'YOURCOMPONENT',
};
</SCRIPT>

在上述示例中，V-IF判断表头和数据行之间的宽度是否大于0，如果大于0，则将DIV设置为表格，并且允许边界滚动。这样就不会出现横向滚动条了。