5

我有多列布局工作，现在想让它与 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 表格分成整行的一些建议

4

1 回答 1

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

于 2014-02-10T06:26:00.180 回答