我有多列布局工作，现在想让它与 html 表格一起工作(请参阅 http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/ )但是只有一个小缺陷:为下一列切割表格的地方，切割可以是排中间……看起来很可怕。
当我的页面只是一系列
元素时，我使用了一个简单的 style="display: inline-block;" 技巧来将段落的内容保持在一起，强制分栏符位于段落之间。
不出所料，这不适用于表格。
我试过将每个
inline-block;" 样式；我试过应用
{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-moz-page-break-inside: avoid;
page-break-inside: avoid;
}
在使用 CSS3 多列时，有没有人建议让 HTML 表格分成整行
最佳答案
截至目前，该标准尚未得到很好的实现。我建议用 div 创建一个伪表，其中行 div 将避免作为 block 元素中断。生成一个div表格就像制作一个表格一样简单。然而，它在浏览器上可能更重。
下面我展示了一个小例子。我希望它运作良好。是我可以设计的唯一解决方案。
<head>
<style>
.columns {
position : relative ;
column-width: 27em;
-moz-column-width: 27em;
-webkit-column-width: 27em;
column-rule: 2px solid red;
-webkit-column-rule: 2px solid red;
-moz-column-rule: 2px solid red;
column-gap: 12px;
-webkit-column-gap: 12px;
-moz-column-gap: 12px;
}
.testerRow {
display : block ;
height : 1em ;
width : 100% ;
margin : 0px ;
}
div.tl1, div.tl2, div.tl3 {
display : block ;
float : left ;
width : 32.5%;
height : 15px ;
border : 2px solid red ;
border-left : 0px solid red ;
border-top : 0px solid red ;
}
div.tl1 {
border : 2px solid red ;
border-top : 0px ;
}
</style>
</hed>
<body>
<div class="columns">
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
<div class="testerRow">
<div class="tl1">test</div>
<div class="tl2">test2</div>
<div class="tl3">test3</div>
</div>
</div>
</body>
可能具有上边框并使用 css3 选择器添加下边框作为最后一个 .testerRow 的 div 子级将比使用下边框更有效。取决于您的实现。祝你好运!
关于html - 使用 html 表格时，在 CSS3 多列中强制分栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18590716/