Question

我有一张桌子，上面有几个牢房。我的表目前看起来像这样：

<table>
  <tr>
    <th>Course</th>
    <th>Students</th>
  </tr>
<tbody>
  <tr>
    <td>Math</td>
  </tr>
  <td><p> Student 1</p><p> Student 2</p>...</td>
</table>

我的问题是学生名单可能非常大。我想能够说，好吧，如果有超过50名学生，在这个单元格内为其他学生创建另一个子列。

所以，现在学生们就像这样在单元格内展示：

Student1
Student2
Student3
Student4
Student5
Student6
Student7
Student8
Student9

我怎么能这样做，如下所示：

Student1   Student6
Student2   Student7
Student3   Student8
Student4   Student9
Student5

从同一个细胞内？

Answer 1

我阅读了评论，我认为你使用表格的方法会让你陷入困境。我不确定您需要支持哪些浏览器，但column-count可以使这一点非常简单。

它基本上将您的学生放在一个列表中，然后执行column-count: 3。

以下是我提出的演示：http://jsbin.com/napam/1/edit

Answer 2

我使用更简单的内容，查看我对您的问题的评论，或td p { float: left; width: 150px; }之类的内容。

但是如果你真的想那样，在单元格中创建浮动div，用5个学生的缓冲区填充......

var students = ["seth","dave","bob","kamil","yusuf","phil","luke","mike","ronald"];

function createDiv(contents) {
    var div = document.createElement("div");
    div.style.cssFloat = "left";
    div.style.width = "100px";
    div.innerHTML = contents;
    return div;
}

var buffer = "", counter = 0;
var list = document.getElementById("list");
students.forEach(function(student) {
    buffer+= student+"<br>";
    if(counter==4) {
        list.appendChild(createDiv(buffer));
        buffer = "";
    }
    counter = ++counter%5;
});
if(buffer) list.appendChild(createDiv(buffer));

我假设list是你的目标细胞：

<table>
    <tr>
        <td id="list"></td>
    </tr>
</table>

请参阅the fiddle。

Answer 3

您可以设置一个列表并发送li float。{/ p>

如果你想要3个col，则每隔3 + 1清除一个新线。

http://codepen.io/gc-nomade/pen/gAneG/

basicly：

 li {
  counter-increment : liste ;
  padding:0;
  margin:0;
  width:80px;
  float:left;
  display:inline;/*kills bullet*/
}
li:nth-child(3n+1){/* that makes 3 cols, and this : li:nth-child(4n+1)would  4 cols */
  clear:left;
}

我不使用column，因为Firefox似乎无法在<table>内正确处理它。使用Firefox查看原因：http://codepen.io/gc-nomade/pen/DBsFI/

在表格单元格内堆叠段落，因此它们不会占用太多高度

3 个答案: