微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS列数将我的表拆分为两个不同的列

我正在尝试在我的页面上创建类似报纸的列.但是,我的页面包含表格,在IE,Chrome,Safari和Opera中,表格被分成两个不同的列;这不是我想要的行为.如果有桌子,我希望完全在一列内.这是一些代码

.newspaper {
    -webkit-column-count: 2; /* Chrome,Safari,Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome,Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}
aragraph

一个简单的方法来查看问题并摆弄它是使用Chrome并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并粘贴我的示例中的代码.如果您尝试Firefox,您将看到该表完全位于左列中.

最佳答案
添加column-break-inside:avoid;到你的桌子:

.newspaper {
    -webkit-column-count: 2; /* Chrome,Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome,Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
    border:dotted 1px #ccc;
}
.newspaper table {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}
aragraph

原文地址:https://www.jb51.cc/css/427196.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。