在使用html表时强制CSS3多列中的分栏
我有多列布局工作，现在想让它与一个html表（见）工作，但只有一个小缺陷：在表被削减为下一列，削减可以是中行。。。而且看起来很可怕 当我有一个只包含一系列元素的页面时，我使用了一个简单的在使用html表时强制CSS3多列中的分栏,html,css,html-table,multiple-columns,Html,Css,Html Table,Multiple Columns,我有多列布局工作，现在想让它与一个html表（见）工作，但只有一个小缺陷：在表被削减为下一列，削减可以是中行。。。而且看起来很可怕 当我有一个只包含一系列元素的页面时，我使用了一个简单的style=“display:inline block；”技巧将段落内容保持在一起，迫使分栏在段落之间 毫不奇怪，这不适用于表 我试着将每个文件的内容放入一个div中，并应用内联块；“style；我已尝试应用 { -webkit-column-break-inside: avoid; -moz-colum
style=“display:inline block；”内联块；“{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-moz-page-break-inside: avoid;
page-break-inside: avoid;
}
有没有人对使用CSS3多列时将HTML表拆分为整行提出过一些建议？到目前为止，这个标准还没有得到很好的实现。我建议使用div创建一个伪表，其中row div将避免作为块元素进行拆分。生成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>
.栏目{
位置：相对位置；
列宽：27em；
-moz列宽：27em；
-webkit列宽：27em；
列规则：2px实心红色；
-webkit列规则：2px实心红色；
-moz列规则：2px实心红色；
柱间距：12px；
-webkit柱间隙：12px；
-moz柱间距：12px；
}
.testerRow{
显示：块；
高度：1米；
宽度：100%；
边际：0px；
}
tl1区、tl2区、tl3区{
显示：块；
浮动：左；
宽度：32.5%；
高度：15px；
边框：2倍纯红；
左边框：0px实心红色；
边框顶部：0px实心红色；
}
第1部分{
边框：2倍纯红；
边框顶部：0px；
}
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3
测试
测试2
测试3