Template:StatTable/styles.css

/* === overall frame === */
table.stat-chart {
    width: 420px;               /* static width; tweak to suit your wiki */
    border: 3px solid #666;
    border-radius: 8px;
    background: #d6d6e6;        /* pale lavender overall */
    font-size: 90%;
    line-height: 1.2em;
    color: #000;
    border-collapse: collapse;
}

/* header/label cells */
table.stat-chart th.lbl,
table.stat-chart .total {
    text-align: left;
    padding: 4px 6px;
    font-weight: 700;
}

/* numeric value cells */
table.stat-chart td.num {
    width: 40px;
    text-align: right;
    padding-right: 6px;
    font-weight: 700;
}

/* cell holding the coloured bar */
table.stat-chart td.bar-cell {
    width: 255px;               /* max bar length + 1-px border */
    padding: 0;
}

/* coloured span – gets inline width from template */
table.stat-chart .bar {
    display: inline-block;
    height: 24px;
    border: 1px solid rgba(0,0,0,.3);
}

/* === stat colours (light row + dark bar) === */
table.stat-chart tr:nth-child(1)  { background:#ffb6b6 } /* HP light */
.bar.hp  { background:#ff6363 }

table.stat-chart tr:nth-child(2)  { background:#f7c79c } /* Attack light */
.bar.atk { background:#e9944a }

table.stat-chart tr:nth-child(3)  { background:#fbe79c } /* Defense light */
.bar.def { background:#f4d249 }

table.stat-chart tr:nth-child(4)  { background:#b7c5f9 } /* Sp.Atk light */
.bar.spa { background:#6a8bf6 }

table.stat-chart tr:nth-child(5)  { background:#c2e3b7 } /* Sp.Def light */
.bar.spd { background:#71ba6a }

table.stat-chart tr:nth-child(6)  { background:#f7b6d1 } /* Speed light */
.bar.spe { background:#ef6aa7 }

/* total row */
table.stat-chart td.total-val {
    text-align: right;
    padding: 4px 8px;
    font-weight: 700;
}