Ширина столбцов форматирования HTML / CSS с перенесенными столбцами - PullRequest
Новая
       8

Ширина столбцов форматирования HTML / CSS с перенесенными столбцами

0 голосов
/ 29 мая 2019

Я создаю сводный информационный лист для студентов.Наиболее эффективный макет для исторических оценок будет использовать столбцы.После заголовка на уровне столбца, состоящего из одного столбца, я хочу, чтобы курсы были разделены на два столбца, как этот (периоды предназначены только для визуальных интервалов):

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-м.Некоторые начинаются во втором семестре, а не в первом. Некоторые посещают однолетние курсы.И у нас есть ученики, которые с нами в 9-м классе, уезжают в 10-й и возвращаются в 11-й.Поэтому использование обтекания столбцов кажется более подходящим подходом.

То, что я пробовал, работает хорошо, пока я не реализую два столбца.В этот момент ширина столбцов игнорируется, и в результате получается фанк.

Так что мне интересно, как мне это сделать.Сетки?Flexboxes?Комбинация?

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