使用 html 表格时，在 CSS3 多列中强制分列答案

【问题标题】：Forcing column breaks in CSS3 multi-column, when using html tables使用 html 表格时，在 CSS3 多列中强制分列
【发布时间】：2013-09-03 11:07:13
【问题描述】：

我有多列布局工作，现在想让它与 html 表格一起工作（请参阅http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/）但是只有一个小缺陷：表格被切割为下一列，切割可以是中排...看起来很可怕。

当我有一个只有一系列

元素的页面时，我使用了一个简单的 style="display: inline-block;" 技巧将段落的内容保持在一起，强制在段落之间进行分栏。

不出所料，这不适用于表格。

我尝试将每个

的内容放入一个 div 中，并应用 inline-block;" 样式；我试过申请

{
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -moz-page-break-inside: avoid;
  page-break-inside: avoid; 
}

对

s 和对 s - 没有喜悦。

有没有人在使用 CSS3 多列时让 HTML 表格分成整行的建议

【问题讨论】：

标签： html css html-table multiple-columns

【解决方案1】：

截至今天，该标准尚未得到很好的实施。我建议使用 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 子级将比使用下边框更有效。取决于您的实施。祝你好运！

【讨论】：