CSS列数将我的表拆分为两个不同的列

时间:2014-10-13 04:27:09

标签: css css3 css-multicolumn-layout column-count

我试图在我的页面上创建类似报纸的列。但是,我的页面包含表格,在IE,Chrome,Safari和Opera中,表格被分成两个不同的列;这不是我想要的行为。如果有桌子,我希望完全在一列内。这是一些代码:



.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}

<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>
&#13;
&#13;
&#13;

一个简单的方法来查看问题并摆弄它就是使用Chrome并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并粘贴我的示例中的代码。如果您尝试Firefox,您将看到该表完全位于左列中。

2 个答案:

答案 0 :(得分:4)

column-break-inside: avoid;添加到您的表格中:

&#13;
&#13;
.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
    border:dotted 1px #ccc;
}
.newspaper table {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}
&#13;
<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我不是100%想要在这里完成的事情......

如果您不想要2列,只需删除css即可。 http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

如果您希望段落在右侧,则使表格向左浮动。 http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{
    float:left;
}

p{
    position:relative;
    left: 20px;
}