Javascript 将段落堆叠在表格单元格中，这样它们就不会'；I don’我不需要那么高

我有一张有几个单元格的桌子。我的表当前如下所示：

<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>

Student1
Student2
Student3
Student4
Student5
Student6
Student7
Student8
Student9

Student1   Student6
Student2   Student7
Student3   Student8
Student4   Student9
Student5

我怎样才能使它像这样显示：

<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>

Student1
Student2
Student3
Student4
Student5
Student6
Student7
Student8
Student9

Student1   Student6
Student2   Student7
Student3   Student8
Student4   Student9
Student5

---

在同一个单元格中？

我会使用更简单的方法，请参见我对您的问题的评论，或者类似于

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));

---

请看。

我仔细阅读了这些评论，我认为你使用表格的方法会让你大吃一惊。我不确定您需要支持哪些浏览器，但是

列计数

可以让这变得非常简单

它本质上是把你的学生放在一个列表中，然后做

列计数：3

---

下面是我提供的演示：

您可以设置一个列表并发送您的

li

使其

浮动

如果你想要3列，让每3+1清除左画一条新的线


基本上：

 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;
}


我不使用
列
，因为Firefox似乎无法在
中正确处理它。看看为什么使用Firefox：
你是如何创建表格的？你的意思是：`student1 student2。。。学生`我在PHP变量中设置HTML，然后回显它（这是wordpress的短码）。我不明白什么是子列。我会将单元格内容放在一个div中，类似于
max height:100px；溢出：取而代之的是自动
。对于我发布的内容，这种方法是一种很好的回退，但是学生们会像他所期望的那样从左到右阅读，而不是从上到下阅读。如果他使用
表
，那么这不是回退，试着在使用Firefox时将
中的
列
设置为
ul
）@BillCriswell此处：第二个表格使用
列宽
和
高度
。因为从左到右的阅读是最自然的，我认为这没有问题：）我同意它更自然！不过，他非常具体地说明了数据的外观。您可以使用autoprefixer，因此无需仅通过webkit访问jsbin，谢谢：）