小编J F*_*ier的帖子

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

我正在尝试在我的页面上创建类似报纸的列.但是,我的页面包含表格,在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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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

css css3 column-count css-multicolumn-layout

5
推荐指数
1
解决办法
3930
查看次数

标签 统计

column-count ×1

css ×1

css-multicolumn-layout ×1

css3 ×1