Question

我有一个从数据库循环到表的数据。但我只需要1列，除非行超出我的高度限制，它应该动态创建另一列或将数据传输到另一列并将我的数据拆分到新列，这可能吗？

Cynthia Abanes 
Melde Feliciano 
Chelsea MacKinnon 
Christine Kostiuk 
Erick 
Vicky Maglinao 
Norman Murehwa 
Ronda 
Elvira Rivera 
Hiyasmin Gajudo 
Mary Jane Reyes 
Ronnie De Guzman 
Annaliza Camino 
Edwin Marino
Lucelle Caseres 
Gayly Reniedo
Joseph Javier 
Herminigildo Urbano 
Herminigildo UrbanO

输出就是这个

Cynthia Abanes       Ronda             Gayly Reniedo
Melde Feliciano      Hiyasmin Gajudo   Joseph Javier 
Chelsea MacKinnon    Mary Jane Reyes   Herminigildo Urbano 
Christine Kostiuk    Ronnie De Guzman  Herminigildo UrbanO
Erick                Annaliza Camino 
Vicky Maglinao       Edwin Marino
Norman Murehwa       Lucelle Caseres

应该是这样的

$('select[class^="el' +pnum+ '"]').each(function(){

Answer 1

以下是使用flexbox的解决方案。不是将数据打印到表格中（table）而是使用列表（ul）。

注意：调整高度会自动将数据移至下一列。

＆＃13;

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  height: 130px;
}

＆＃13;

<ul>
  <li>Cynthia Abanes</li>
  <li>Melde Feliciano</li>
  <li>Chelsea MacKinnon</li>
  <li>Christine Kostiuk</li>
  <li>Erick</li>
  <li>Vicky Maglinao</li>
  <li>Norman Murehwa</li>
  <li>Ronda</li>
  <li>Elvira Rivera</li>
  <li>Hiyasmin Gajudo</li>
  <li>Mary Jane Reyes</li>
  <li>Ronnie De Guzman</li>
  <li>Annaliza Camino</li>
  <li>Edwin Marino</li>
  <li>Lucelle Caseres</li>
  <li>Gayly Reniedo</li>
  <li>Joseph Javier</li>
  <li>Herminigildo Urbano</li>
  <li>Herminigildo UrbanO</li>
</ul>

＆＃13;

Answer 2

有一个jquery插件解决方案Columnizer。另请查看this worked example.

您可能需要将输出从表更改为div或unordered-list。

看起来非常简单。

此处未复制任何代码，因为该插件已有很多示例，并且博客条目也清晰可写。

Answer 3

“正常”方式是检查width而不是高度。出于不同的原因，其中一个原因是你的宽度有限，特别是移动设备，这就是为什么有人投入CSS MedaQueries

使用媒体查询，您可以制作一个简单的解决方案：

table td {
  background-color: orange;
}

@media (max-width: 400px) {
  table td {
    display: block;
    margin: 0 0 2px 0;
  }
}

<table>
    <tr>
        <td>Cynthia Abanes</td>
        <td>Melde Feliciano</td>
        <td>Chelsea MacKinnon</td>
    </tr>
    <tr>
        <td>Christine Kostiuk</td>
        <td>Erick</td>
        <td>Vicky Maglinao</td>
    </tr>
    <tr>
        <td>Norman Murehwa</td>
        <td>Ronda</td>
        <td>Elvira Rivera</td>
    </tr>
    <tr>
        <td>Hiyasmin Gajudo</td>
        <td>Mary Jane Reyes</td>
        <td>Ronnie De Guzman</td>
    </tr>
    <tr>
        <td>Annaliza Camino</td>
        <td>Edwin Marin</td>
        <td>Lucelle Caseres</td>
    </tr>
    <tr>
        <td>Gayly Renied</td>
        <td>Joseph Javier</td>
        <td>Herminigildo Urbano</td>
    </tr>
    <tr>
        <td>Herminigildo Urban</td>
    </tr>
</table>

Here is a jsFiddle so you can resize your screen and see how it works

但是现在你说你要检查身高。因此，您将无法知道服务器上的高度，因此您需要使用javascript检查/更改它。这样的事情可能是一个解决方案：

if($('table').height() > $(window).height()) {
	$('table').addClass('table-is-to-big')
} else {
	$('table').removeClass('table-is-to-big')
}

table {
  border-spacing: 0;
}

table td {
  background-color: orange;
  display: block;
  margin: 0 0 2px 0;
}

table.table-is-to-big {
  border:solid 5px red;
}

table.table-is-to-big td {
  display: table-cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Cynthia Abanes</td>
        <td>Melde Feliciano</td>
        <td>Chelsea MacKinnon</td>
    </tr>
    <tr>
        <td>Christine Kostiuk</td>
        <td>Erick</td>
        <td>Vicky Maglinao</td>
    </tr>
    <tr>
        <td>Norman Murehwa</td>
        <td>Ronda</td>
        <td>Elvira Rivera</td>
    </tr>
    <tr>
        <td>Hiyasmin Gajudo</td>
        <td>Mary Jane Reyes</td>
        <td>Ronnie De Guzman</td>
    </tr>
    <tr>
        <td>Annaliza Camino</td>
        <td>Edwin Marin</td>
        <td>Lucelle Caseres</td>
    </tr>
    <tr>
        <td>Gayly Renied</td>
        <td>Joseph Javier</td>
        <td>Herminigildo Urbano</td>
    </tr>
    <tr>
        <td>Herminigildo Urban</td>
    </tr>
</table>

Here is fiddle, if height is big enough is one big column else like table

如果行达到最大高度，如何拆分表列

3 个答案: