# Table 固定標題 & row Collapse
###### tags: `語法堂`

## 結果

## Table 固定標題

### Style

/* 用偽元素實現有 Sticky 的 th 的邊框 */
table.theadStickyOnTop th:after,
table.theadStickyOnTop th:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
}

table.theadStickyOnTop th:before {
    top: -1px;
    border: 2px solid rgba(0,0,0,.05);
}

table.theadStickyOnTop th:after {
    bottom: -1px;
    border: 2px solid rgba(0,0,0,.05);
}

table.theadStickyOnTop {
    table-layout: fixed;
    /* ↓↓讓 sticky 有邊線的方法，可是每格 td 都有被分開的感覺 */
    /*border-collapse: separate;*/
}

table.theadStickyOnTop thead tr th {
    background-color: lightblue;
    position: sticky;
    top: 0; /* 列首永遠固定於上 */
}

### Html

table 套用 theadStickyOnTop 即可

## row Collapse
### Style

tr.accordion-toggle[aria-expanded="true"] .expand-button:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f146";
}

tr.accordion-toggle[aria-expanded="false"] .expand-button:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f0fe";
}

tr.accordion-toggle {
    cursor: pointer;
}

div[id*="additional_row"] {
    max-height: 300px;
    overflow-y: scroll
}

td.additional_row_container {
    padding: 0;
}

### Html

<tr>
    <td class="additional_row_container" colspan="4">
        <div id="additional_row_@index" class="collapse pt-0 pl-2 pr-2">
            <table class="table table-borderless theadStickyOnTop border border-info">
                <thead>
                    <tr>
                        <th style="width:10%;white-space: nowrap;">序列號</th>
                        <th style="width:10%;white-space: nowrap">技能規範</th>
                        <th style="width:10%;white-space: nowrap">公開/非公開</th>
                        <th style="width:10%;white-space: nowrap">單複選</th>
                        <th style="width:10%;white-space: nowrap">難易度</th>
                        <th style="width:40%;white-space: nowrap">題目</th>
                        <th style="width:10%;white-space: nowrap">選項</th>
                        @*<th style="white-space: nowrap">選項一</th>
                            <th style="white-space: nowrap">選項二</th>
                            <th style="white-space: nowrap">選項三</th>
                            <th style="white-space: nowrap">選項四</th>*@
                    </tr>
                </thead>
                <tbody>
                    @foreach (var question in paper.Questions)
                    {
                        <tr>
                            <td>@questionIndex</td>
                            <td style="white-space: nowrap">@question.Main.SkillRuleCode</td>
                            <td style="white-space: nowrap">@(question.PublicYears.Any() ? "公開" : "非公開")</td>
                            <td style="white-space: nowrap">@(((Question_DetailOfOptionTypeModel)question.Detail).IsMultiple ? "複選" : "單選")</td>
                            <td style="white-space: nowrap">@question.Main.DifficultyLevel.ToString()</td>
                            <td>@question.Main.Topic</td>
                            <td><button class="btn btn-primary"><i class="far fa-eye"></i></button></td>
                            @*<td>@(((Question_DetailOfOptionTypeModel)question.Detail).Option1)</td>
                                <td>@(((Question_DetailOfOptionTypeModel)question.Detail).Option2)</td>
                                <td>@(((Question_DetailOfOptionTypeModel)question.Detail).Option3)</td>
                                <td>@(((Question_DetailOfOptionTypeModel)question.Detail).Option4)</td>*@
                        </tr>

                        questionIndex += 1;
                    }
                </tbody>
            </table>
        </div>
    </td>
</tr>