Cod*_*lla 5 html html-table css3 multiple-columns
我可以使用多列布局，现在想让它与html表一起使用（请参阅http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/），但是这里只有一个小缺点：表格在下一栏被剪掉，剪掉的可能是中间行...看起来很可怕。
当我的页面只是一系列<p>元素时，我使用了一个简单的style="display: inline-block;"技巧将段落内容保持在一起，迫使分栏符位于段落之间。
毫不奇怪，这不适用于表。
我尝试将每个<td>的内容放入div中，并应用inline-block;"样式；我尝试过申请
{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-moz-page-break-inside: avoid;
page-break-inside: avoid;
}
到<tr> s和<td> s-没有喜悦。
有没有人建议使用CSS3多列时将HTML表格分成多行
截至目前，该标准尚未得到很好的实施。我建议使用 div 创建一个伪表，其中行 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>
可能具有上边框并使用 css3 选择器添加下边框作为最后一个 .testerRow 的 div 子元素将比使用下边框更有效。取决于您的实施。祝你好运！