CSS列计数将我的表分成两个不同的列

我试图在我的页面上创建类似报纸的列。但是，我的页面包含表格，在IE，Chrome，Safari和Opera中，表格被分成两列，这不是我想要的行为。哪里有桌子，我想完全在一列内。下面是一些代码：CSS列计数将我的表分成两个不同的列

.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>

一个简单的方法，看问题和拨弄它是使用Chrome，去http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并粘贴在他们与我的示例中的代码。如果您尝试使用Firefox，您会发现该表格完全位于左栏内。

来源

2014-10-13 J Fournier

所以，你要的是你的表左边和段落上右，右> –

是，但我使用列数的原因是因为我的页面是动态的，我希望它始终占用最小的垂直空间量。在表格上方还可能有一段，而且我不知道哪一段会更长，所以我使用列计数来布置页面，但我不希望表格分成两个不同的列。 –

我确定我的答案。但是你必须有很多段落。它会正常工作。 –

添加column-break-inside: avoid;到表：

.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; 
 
}

<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>

来源

2014-10-13 05:00:41

非常感谢！这似乎工作，如果我稍微修改您的建议并添加.newspaper表-webkit-column-break-inside：avoid; -moz-column-break-inside：avoid; -o-column-break-inside：avoid; -ms-column-break-inside：avoid; column-break-inside：avoid; }想要修改您的答案，以便我可以接受它？ –

为什么要表？什么是最长的？表或段落？但。正如你所希望的那样。 –

我不知道哪个会比较长，桌子前后的东西。网页上会有很多表格和段落。我不在乎段落是否在列之间分开。这是困扰我的表分裂。再次感谢！ –

我不是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; 
}

来源

2014-10-13 04:49:22 DevVex

感谢您的关注。我绝对需要两列，因为我希望内容在页面上占用较少的空间。我不知道我是想要左边还是右边的表格，因为页面是动态的，有很多表格和文本，这就是为什么我使用列数自动布局页面的原因像报纸专栏。它的工作原理是如何在Firefox中。我希望我可以在表格中添加一个样式，以防止它分裂，就像你可以使用页面中断一样：避免，以便让它在所有浏览器中工作。 –

CSS列计数将我的表分成两个不同的列

回答

相关问题