CSS列数将我的表格分成两列

Question

CSS列数将我的表格分成两列

5

我正在试图在我的页面上创建类似报纸的列。然而，我的页面包含表格，在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>

一个轻松的方法是使用Chrome并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap，然后将我的代码粘贴到他们的示例中以查看问题并进行调整。如果您尝试Firefox，您会发现表格完全停留在左列中。

- J Fournier

所以，你想要的是把表格放在左边，段落放在右边，对吧？ - Hendry Tanaka

是的，但我使用column-count的原因是因为我的页面是动态的，我希望它始终占用最少的垂直空间。表格上方可能还有一个段落，而我不知道哪个会更长，所以我使用column-count来布局页面，但我不想将表格分成两列。 - J Fournier

我对我的答案非常有信心。但是你必须有很多段落。它会很好地工作。 - Hendry Tanaka

2个回答

0

我不完全确定你在这里想要实现什么...

如果你不想要两列，只需删除CSS。http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

如果你想让段落在右边，那就让表格向左浮动。 http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{
    float:left;
}

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

- DevVex

感谢您的关注。我肯定需要两列，因为我希望内容在页面上占用更少的空间。我事先不知道我想要表格在左边还是右边，因为页面是动态的，有很多表格和文本，这就是为什么我使用column-count自动布局页面，就像报纸栏目一样。它在Firefox中完全按照我的意愿工作。我希望我可以添加一个样式到表格中，使其不会分裂，就像您可以使用page-break-inside: avoid一样，在所有浏览器中都能正常工作。 - J Fournier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hendry Tanaka · Accepted Answer

在你的表格中添加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>