CSS

【CSS】モバイルフォールバックを備えたシンプルなドットプロットグラフCSS Dot Plot Graph

December 9, 2017
CSS-Dot-Plot-Graph

CSS Dot Plot Graphはモバイルフォールバックを備えたシンプルなCSSドットプロットグラフ。

HTML

   <table id="dot-plot-graph">
        <caption>Make vs Avg. Mileage</caption>
        <tbody>
            <tr id="section-1" class="section">
                <th scope="row">honda</th>
                <td class="dot"><p>25.2km</p></td>
            </tr>
            <tr id="section-2" class="section">
                <th scope="row">hyundai</th>
                <td class="dot"><p>21.1km</p></td>
            </tr>
            <tr id="section-3" class="section">
                <th scope="row">audi</th>
                <td class="dot"><p>17.3km</p></td>
            </tr>
            <tr id="section-4" class="section">
                <th scope="row">pontiac</th>
                <td class="dot"><p>16.2km</p></td>
            </tr>
            <tr id="section-5" class="section">
                <th scope="row">jeep</th>
                <td class="dot"><p>14.3km</p></td>
            </tr>
            <tr id="section-6" class="section">
                <th scope="row">dodge</th>
                <td class="dot"><p>10.1km</p></td>
            </tr>
        </tbody>
    </table>
    <div id="ticks">
        <div class="tick"><p>15</p></div>
        <div class="tick"><p>20</p></div>
        <div class="tick"><p>25</p></div>
    </div>

MIT