javascript - 将段落堆叠在一个表格单元格内,这样它们就不会占据那么高的高度

标签 javascript html css

我有一个包含多个单元格的表格。我的表目前看起来像这样:

<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

来自同一个单元格?

最佳答案

我通读了评论,我认为您使用表格的方法会让您大吃一惊。我不确定您需要支持哪些浏览器,但 column-count 可以让这变得非常简单。

它本质上是将您的学生放在一个列表中并执行 column-count: 3

这是我想出的演示:http://jsbin.com/napam/1/edit

关于javascript - 将段落堆叠在一个表格单元格内,这样它们就不会占据那么高的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22947545/

相关文章:

javascript - 绝对定位但仅限于 div 内部

javascript - 使用 WebStorm 进行 ECMAScript 2015 开发而无需我自己的 gulp/grunt/webpack 脚本?

javascript - 如何通过嵌套对象/数组正确循环/ng-repeat?

html - Flexbox - 带有 "no wrap"文本的流体列

html - Shopify tablerow 循环提前退出

html - 在 Bootstrap 中垂直对齐文本

javascript - 拖放 firefox ghost 图像位置

css - mod_pagespeed 正在重写但不合并

Javascript变量名冲突

javascript - 数据库不更新用户密码重置