带有换行列的HTML / CSS格式化列宽

Question

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

2017-18，九年级

S1年级老师......... S2年级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师

2018-19，十年级

S1年级老师......... S2年级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师
S1班级老师......... S2班级老师

（依此类推）

我不想将它们固定在表格列中，因为学生没有相同的历史数据。有些学生从9年级开始，而其他学生则从11年级开始。有些课程从第二学期开始，而不是第一学期。有些课程需要一年的课程。我们有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>