时间戳

首页 > 解决方案 > HTML/CSS 格式化列宽与换行列

html - HTML/CSS 格式化列宽与换行列

问题描述

我正在为学生生成一个累积信息表。历史成绩的最有效布局将使用列。在单列年级标题之后，我希望课程像这样包装成两列（句点仅用于视觉间距）：

2017-18，9 年级

S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师

2018-19，10 年级

S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师
S1 课程年级老师………… S2 课程年级老师

（等等）

我不想将这些固定到表格列中，因为学生没有相同的历史数据。有些学生从 9 年级开始，有些学生从 11 年级开始。有些从第 2 学期开始而不是第 1 学期。有些则参加为期一年的课程。我们有学生在 9 年级和我们在一起，10 年级离开，11 年级回来。因此，使用包装列似乎是一种更好的方法。

在我实现这两列之前，我尝试过的效果很好。在这一点上，列宽被忽略，结果很时髦。

所以我想知道我应该怎么做。网格？弹性盒？组合？

    .gradesWrap {
        column-count: 2;
    }

    td.gradesWrap {
        font-size: 8pt;
        text-align: left;
    }

.

<!-- HEADING -->
(SQL code)

<div style="font-weight:bold; font-size:9pt" width=100% border="solid 1pt black">
~(schYear), ~(grade_level)
</div>


<!-- DATA -->
<div class="gradesWrap">

(SQL code)

<TABLE>
    <TR>
        <TD width=25pt class="gradesWrap">~(storecode)</TD>
        <TD width=140pt class="gradesWrap">~(course_name)</TD>
        <TD width=30pt class="gradesWrap">~(sg.grade)</TD>
        <TD width=30pt class="gradesWrap">~(sg.earnedcrhrs)</TD>
        <TD width=76pt class="gradesWrap">~(teacher)</TD>                        
    </TR>
</TABLE>                        

</div>

标签： htmlcssformatword-wrap

解决方案

推荐阅读