Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8647

シンプルなテーブルcss

$
0
0

今回は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>


Viewing all articles
Browse latest Browse all 8647

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>