<table>
<caption>2007 Greenhouse gas contributions, per country (megatonnes)</caption>
<thead>
<tr>
<td>
<th scope="col">USA
<th scope="col">China
<th scope="col">India
<th scope="col">Canada
<th scope="col">Brazil
</thead>
<tbody>
<tr>
<th scope="row">CO<sub>2</sub>
<td>29,529.1
<td>6,702.6
<td>1410.4
<td>583.9
<td>373.7
<tr>
<th scope="row">Methane
<td>521
<td>853.3
<td>547.7
<td>102
<td>389.1
</tbody>
</table>
@font-face {
font-family: 'Calluna';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf') format('woff');
}
table {
margin: 1rem auto;
font-size: 1.6rem;
border-collapse: collapse;
font-family: Calluna, Arial, sans-serif;
}
table td {
text-align: right;
padding: .5rem;
width: 5rem;
}
table thead th {
border-bottom: 1px solid #777;
font-weight: 400;
}
table tbody th {
font-weight: 400;
text-align: right;
padding-right: 1rem;
}
table caption {
font-weight: 600;
font-feature-settings:"smcp";
margin-bottom: 1rem;
}
table tbody td {
font-feature-settings: "tnum";
color: #444;
}
@media all and (max-width: 636px) {
table {
font-size: 1.4rem;
}
}
@media all and (max-width: 522px) {
table {
font-size: 1.2rem;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.