シンプルなテーブルcss

今回はvue.js バージョン。

そのままコピペなので、参考程度にどうぞ。

<style>

    table.simple {
        border: 1px solid #ededed;
        width: 99%;
        margin: auto;
    }

    table.simple th  {
        padding: 5px;
        border-bottom: 1px solid #ededed;
        background-color: #2cb696;
        color: #fff;
    }

    table.simple td , table.simple th  {
        padding: 5px 15px;
        border-right: 1px solid #ededed;

    }

    table.simple td:last-child ,  table.simple th:last-child  {
        border-right: 0px;
    }

    table.simple tr  {
        border-bottom: 1px solid #ededed;
    }


</style>

<template>

            <div>

                <table class="simple">

                    <tr>
                        <th>入金日</th>
                        <th>売上</th>
                        <th>タイプ</th>
                    </tr>

                    <tr>
                        <td>5月14日</td>
                        <td>3,000円</td>
                        <td>果物</td>
                    </tr>

                    <tr>
                        <td>5月22日</td>
                        <td>5,300円</td>
                        <td>米</td>
                    </tr>

                </table>

            </div>


</template>