文章/答案/技术大牛

发布

社区首页 >问答首页 >当使用html表时，强制CSS3多列中的列中断。

问当使用html表时，强制CSS3多列中的列中断。
EN

Stack Overflow用户

提问于 2013-09-03 11:07:13

回答 1查看 2.1K关注 0票数 5

我有多列布局工作，现在想让它处理一个html表(请参阅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-没有joy。

当使用CSS3多列时，有没有人建议让HTML表分解成整行？

css

html-table

multiple-columns

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-10 06:26:00

到今天为止，这个标准还没有得到很好的实现。我建议使用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子元素将比使用下边框更有效。取决于你的实现。祝好运!

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18590716

复制

相似问题

问当使用html表时，强制CSS3多列中的列中断。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当使用html表时，强制CSS3多列中的列中断。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当使用html表时，强制CSS3多列中的列中断。
EN