Html Chrome64的CSS列中断问题

我无法让Chrome64正确执行分栏操作

下面是HTML的一个示例块：

<tr><TD>
<div class="keeptogether">
<table class="header">
<tr><td><a href=#missing onclick="toggle('general-catalogue-composer0')">
<B>Willoughby Bertie, 4th Earl of Abingdon<font size=-2> (1740 - 1799)
</font></B></a></TD></TR>
<TR><td>
<div id = "general-catalogue-composer0"  style="display: none;">
<table class="detail">
<tr><td>
All hail to the myrtle shade. T.T.T.Kbd..&nbsp;&nbsp;
<a href=http://www.notamos.co.uk/detail.php?scoreid=145425 
target=_blank>Play/print/buy</a>
</td></tr>
<tr><td>
Where shall a hapless lover find. T.T.T.Kbd..&nbsp;&nbsp;
<a href=http://www.notamos.co.uk/detail.php?scoreid=145427
target=_blank>Play/print/buy</a>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
</td></tr>

这一切在最新版本的Edge和IE上都能完美地工作——当我点击标题时，细节线就会出现，列会重新调整自己，这样在列的顶部就没有细节线了。在Chrome上，这根本不会发生——显示切换很好，但Chrome似乎可以在任何它喜欢的地方添加分栏符

我的理解是Chrome64应该支持我使用的CSS设置

感谢您的任何意见

---

另外，我最终成功地使用flexbox提供了必要的列分隔符。

我没有测试过您的表代码，但是使用了项目符号列表，如果您在外部元素（UL）上有-webkit列CSS，在内部元素（LI）上有-webkit列分隔符，那么它在Chrome 64中可以正常工作。也许可以选择使用列表而不是表格（如果可能的话）。

按要求编辑帖子，尽管我认为flexbox确实提供了一个真实的答案，因为它完全解决了我的问题。我认为，因为这篇帖子吸引了一个“风滚草”徽章，所以它有被删除的危险。这似乎是一种耻辱，因为我认为在某个时候对/某人/可能是有用的（我通常希望论坛上的问题从知识库的角度来看是可用的）。非常感谢您对此作出回应。我最终使用flexbox来提供必要的列分隔符（这非常有用），但如果不是这样，我肯定会做出您建议的更改。

.detail {
    font-size: 8px;
}
.header {
    font-size: 10px;
}
.menuindex, .menuchoral-sacred, .menuchoral-profane, .menuinstrumental {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}
.keeptogether {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}