为什么不灵活增长:1适用于Safari中的表格? [英] Why doesn't flex-grow: 1 work for a table in Safari?
本文介绍了为什么不灵活增长:1适用于Safari中的表格?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是一个片段.
.outer-wrapper {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
}
.inner-wrapper {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
table {
border: 1px solid black;
border-spacing: 0;
flex-grow: 1;
}
td,
th {
border-bottom: 1px solid black;
border-right: 1px solid black;
margin: 0;
padding: 0.5rem;
}
td:last-child,
th:last-child {
border-right: 0;
}
tr:last-child td {
border-bottom: 0;
}
<div class="outer-wrapper">
<h1>Table</h1>
<div class="inner-wrapper">
<table>
<thead>
<th>Foo</th>
<th>Bar</th>
</thead>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
</table>
</div>
</div>
如果您在Chrome(和大多数浏览器,fwiw)中运行它,则会得到以下提示:
If you run it in Chrome (and most browsers, fwiw), you get this:
但是在macOS上的Safari 13.0.2中,就像这样:
But in Safari 13.0.2 on macOS it's like this:
推荐答案
感谢@Michael_B,我现在了解到该表在flexbox样式中的工作方式非常特殊.
Thanks to @Michael_B, I now understand that the table works in a rather peculiar way with flexbox styling.
似乎我必须使用width: 100%
而不是flex-grow: 1
.这不是世界末日,因为该表位于dom层次结构中最深的级别,但它仍然令人b目结舌.
It seems I must use width: 100%
instead of flex-grow: 1
. It's not the end of the world, since the table is at the deepest level in the dom hierarchy, but it's still a bummer.
这篇关于为什么不灵活增长:1适用于Safari中的表格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文