Question

我有多列布局工作，现在想让它使用html表（参见http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/）但是只有一个小漏洞：在下一列切割表时，切割可能是中排...而且看起来很可怕。

当我的网页只是一系列＆lt; p＆gt;我使用一个简单的style="display: inline-block;"技巧将段落的内容保存在一起，强制列分隔符在段落之间。

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

我已尝试将每个＆lt; td＆gt;的内容放入进入div，应用inline-block;"风格;我试过申请

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

到＆lt; tr＆gt; s和＆lt; td＆gt; s - 没有快乐。

当使用CSS3多列

时，是否有人建议让HTML表分成整行？

Answer 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子节点将比使用下边框更有效。取决于您的实施。祝好运！

使用html表时强制CSS3多列中的列中断

1 个答案: