# ResponseTable-Broke
###### tags: `實作功能`

[參考資料](https://lab.25sprout.com/responsive_table/)

## HTML

    <div style="width:300px">
        <table class="page2Table_Moblie break-table" style="width:100%">
            <thead>
                <tr class="topBottomBlack">
                    <th>評定項目</th>
                    <th>答對題數</th>
                    <th>總題數</th>
                    <th>正確率</th>
                </tr>
            </thead>
            <tbody>
                <tr class="middleGray topGrey bottomGrey">
                    <td data-th="評定項目">資料結構與演算法</td>
                    <td data-th="答對題數">9題</td>
                    <td data-th="總題數">11題</td>
                    <td data-th="正確率">82%</td>
                </tr>
                <tr class="middleGray bottomGrey">
                    <td data-th="評定項目">程式設計</td>
                    <td data-th="答對題數">7題</td>
                    <td data-th="總題數">11題</td>
                    <td data-th="正確率">64%</td>
                </tr>
                <tr class="middleGray bottomGrey">
                    <td data-th="評定項目">系統平台</td>
                    <td data-th="答對題數">8題</td>
                    <td data-th="總題數">9題</td>
                    <td data-th="正確率">89%</td>
                </tr>
                <tr class="middleGray bottomGrey">
                    <td data-th="評定項目">資料表示、處理及分析</td>
                    <td data-th="答對題數">5題</td>
                    <td data-th="總題數">7題</td>
                    <td data-th="正確率">71%</td>
                </tr>
                <tr class="middleGray bottomGrey">
                    <td data-th="評定項目">資訊科技應用</td>
                    <td data-th="答對題數">4題</td>
                    <td data-th="總題數">4題</td>
                    <td data-th="正確率">100%</td>
                </tr>
                <tr class="bottomGrey">
                    <td data-th="評定項目">資訊科技與人類社會</td>
                    <td data-th="答對題數">7題</td>
                    <td data-th="總題數">8題</td>
                    <td data-th="正確率">88%</td>
                </tr>
                <tr class="topBottomBlack bottomGrey">
                    <td data-th="評定項目">合計</td>
                    <td data-th="答對題數">40題</td>
                    <td data-th="總題數">50題</td>
                    <td data-th="正確率">80%</td>
                </tr>
            </tbody>
        </table>
    </div>

## CSS

.break-table tr.bottomGrey {
    border-bottom: 3px solid grey !important;
}

.break-table tr.topGrey {
    border-top: 3px solid grey !important;
}

.break-table tr {
    background-color: #ffffff;
    display: block;
}

.break-table td {
    text-align: center;
    border: none !important;
    border-right: 3px solid black !important;
    position: relative;
    padding-left: 35% !important;
    white-space: normal;
    border-right: 3px solid black;
    display: block;
}

    .break-table td:before {
        text-align: center;
        border-left: 3px solid black;
        border-right: 3px solid black;
        content: attr(data-th);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30%;
        height: 100%;
        white-space: nowrap;
        font-weight: bold;
        background-color: #30d6f1d6;
    }

.break-table thead {
    display: none;
}

## 結果


[JSFiddle](https://jsfiddle.net/u1adotn4/)

[GitHub MoiraTools -> Plugin -> ResponseTable-Broke](https://github.com/MoiraHan/MoiraTools/tree/master/MoiraTools/Plugins/ResponseTable-Broke)