В Mozilla Firefox HTML-таблицы не работают в контейнере div с двумя столбцами
В Mozilla Firefox HTML-таблицы не работают в контейнере div с двумя столбцами.
В других браузерах, когда у нас есть таблица в контейнере с двумя столбцами, таблица вырезается в первом столбце и продолжается в следующем столбце, в случае Mozilla она все еще находится в том же столбце.
Я оставляю пример HTML-кода для этого случая, чтобы вы могли попробовать его в разных браузерах и увидеть мою проблему.
<html lang="en-US"><head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>CSS Columns example</title>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css">
<style>
body {
margin: 40px;
}
.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap" 60px;
}
</style>
</head>
<body>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla nisi, cursus eget tristique non, volutpat quis odio. Cras eleifend volutpat arcu, vel sagittis lorem semper id. Aliquam ex enim, ultrices non ex ut, congue tincidunt metus. Morbi eget aliquet risus. Sed id sapien ex. Nam quis velit quis lectus porta placerat eget nec felis. Ut ac condimentum elit, id tristique mauris. Pellentesque tincidunt vulputate turpis ut pulvinar.
</p>
<p>
Cras nec mauris vel urna ultrices placerat. Fusce volutpat tortor dapibus hendrerit elementum. Aenean eget sollicitudin nisi, ut egestas enim. Vivamus sit amet facilisis ante. Aliquam erat volutpat. Maecenas vitae magna at est egestas lobortis. Quisque ultricies porta nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque tempus diam ex, a varius nibh hendrerit nec. Praesent blandit nisl id nisl lobortis commodo. Aliquam sagittis blandit lectus. Etiam lorem felis, accumsan et pellentesque eu, finibus vel metus. Curabitur eu ipsum non eros porta facilisis. In hac habitasse platea dictumst. Nunc a felis justo. Quisque bibendum lorem lorem, quis porta nunc fringilla sed.
</p><table style="width:100%">
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tbody></table>
<p>
Donec dignissim dui neque, non mollis dolor molestie in. Fusce at porta ligula. Quisque ac pellentesque justo, vel venenatis augue. Aliquam at felis vitae massa consequat tempor ac in metus. Sed sit amet fringilla nulla, sit amet lobortis erat. Phasellus tellus sapien, convallis nec dui sed, sagittis euismod urna. Donec a metus lorem. Nam lorem justo, mattis ac sapien at, sollicitudin viverra magna. Donec laoreet lacus sit amet venenatis bibendum. Cras at ipsum vel elit luctus hendrerit vel eget ligula. Praesent ac neque in nunc molestie dapibus nec ut orci. Vestibulum efficitur vitae est id laoreet. Proin quis quam sit amet ipsum eleifend feugiat. Vestibulum odio felis, sagittis ut magna sit amet, fermentum lobortis magna.
</p>
<p>
Proin nec purus nulla. Morbi in venenatis quam, ac ultrices ante. Cras dictum fermentum malesuada. Donec tortor nisi, rhoncus vitae accumsan a, lobortis quis est. Curabitur quis augue vitae diam tristique cursus sit amet ut nulla. Sed sem justo, sagittis a sodales vitae, tincidunt nec nibh. Quisque sem enim, ullamcorper sit amet scelerisque non, auctor quis odio. Aenean vitae gravida nunc. Nullam vel ipsum nibh. Proin ullamcorper pretium vehicula. Fusce ac tellus eget orci rutrum malesuada. Proin eget ante metus. Suspendisse finibus maximus erat at rutrum.
</p>
<p>
Phasellus a tellus ut nisi lobortis commodo. Suspendisse lorem ante, hendrerit et leo vitae, eleifend ullamcorper nunc. Vivamus pellentesque purus enim, sed finibus neque posuere eget. Praesent arcu nibh, consectetur nec lobortis in, tristique quis lorem. Suspendisse sed feugiat turpis. Vestibulum convallis vitae sem sed cursus. Aenean fringilla urna non interdum varius. Etiam tristique mauris sapien, ultrices blandit leo auctor in. In hac habitasse platea dictumst. Integer pharetra magna sed dui suscipit sodales. Suspendisse a pretium urna, a finibus ligula. Quisque non massa ut sapien auctor vehicula eu eu ante.
</p>
</div>
</body></html>