JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<body>
<div class="table-container">
                <div class="table-number">Table 1:</div>
                <div class="table-heading">Developed world tobacco industry: 1973-2010</div>
                <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Volume p.a.</th>
                            <th>Real price p.a.</th>
                            <th>Real revenue p.a.</th>
                            <th>Real GDP p.a.</th>
                            <th>Period</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>United States</td>
                            <td class="perc">-1.5%</td>
                            <td class="perc">3.4%</td>
                            <td class="perc">1.9%</td>
                            <td class="perc">2.8%</td>
                            <td class="num">1,973</td>
                        </tr>
                        <tr>
                            <td>Australia</td>
                            <td class="perc">-1.9%</td>
                            <td class="curr highlight">$9,999.00</td>
                            <td class="curr">R5,000.00</td>
                            <td class="curr">R5,000.00</td>
                            <td class="num">1,973</td>
                        </tr>
                        <tr>
                            <td>UK</td>
                            <td class="perc">-1.0%</td>
                            <td class="perc">3.0%</td>
                            <td class="perc">1.3%</td>
                            <td class="perc highlight-alt">2.0%</td>
                            <td class="num">1,988</td>
                        </tr>
                        <tr>
                            <td>Average</td>
                            <td class="perc highlight">-1.4%</td>
                ...

CSS

<!-- This is just TWITTER BOOTSTRAP -- START  -->

table {
  max-width: 100%;
  background-color: white;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  margin-bottom: 10px;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 20px;
  line-height: 20px;
  vertical-align: top;
  border-top: 1px solid black;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid black;
}
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid black;
}
.table .table {
  background-color: white;
}

.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 10px;
}

.table-bordered {
  border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: green;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: orange;
}

table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display:...