這種表格布局怎么實現(xiàn)

如上圖，產(chǎn)品要求點擊展開效果是內(nèi)容向下?lián)伍_，而不是浮層，這種效果怎么布局？以下是我的代碼。

 <table class="table w-w-b">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="160">
                    <col width="80">
                    <col width="180">
                    <col width="100">
                    <col width="100"/>
                    <col width="117"/>
                    <col width="123">
                </colgroup>
                <thead>
                    <tr class="active">
                        <th>SPIU ID</th>
                        <th>Detail Information</th>
                        <th>Belong to Category</th>
                        <th>Product Type</th>
                        <th>JD Price(Rp)</th>
                        <th>Time of On Shelf</th>
                        <th>Modify Time</th>
                        <th>Operator</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(ware, index) in wareList">
                        <td>
                            <input :id="'spuId_' + ware.wareId" type="checkbox" class="checkbox"/>
                            <label :for="'spuId_' + ware.wareId">{{ ware.wareId }}</label>
                            <div class="ware-detail-wrapper">
                                <a class="btn-add" :class="{'btn-minus' : showModalList[index].showFlag}" @click="showWareDetailModal(index)"></a>
                                <ware-detail-modal class="detail-wrapper" :skuInfoList="ware.skuInfoVOs" v-if="showModalList[index].showFlag"></ware-detail-modal>
                            </div>
                        </td>
                        <td class="ware-info">
                            <div class="ware-image"></div>
                            <a class="detail-info">{{ ware.spuName }}</a>
                        </td>
                        <td>{{ ware.catLv1Name }}<br/>
                            {{ ware.catLv2Name }}<br/>
                            {{ ware.catLv3Name }}
                        </td>
                        <td>{{ getProductType(ware.dropShipType) }}</td>
                        <td><span v-html="getFormatMoney(ware)"></span></td>
                        <td>{{ getFormatDate(ware.onShelfTime, 'yyyy-mm-dd hh:mm:ss')}}</td>
                        <td>{{ getFormatDate(ware.modified, 'yyyy-mm-dd hh:mm:ss')}}</td>
                        <td>{{ ware.lastOperator}}</td>
                        <td><a href="">Modify</a></td>

                      </tr> 
                    <tr v-if="wareList && wareList.length <= 0">
                        <td colspan="9">
                            <div class="text-center">No record~</div>
                        </td>
                    </tr>
                </tbody>
            </table>