JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<table class="grid2aa" width="100%">
<caption>Conference Form Guide</caption>
<tbody><tr><th class="grid">&nbsp;</th><th class="grid">&nbsp;</th><th class="grid">P</th><th class="grid">GD</th><th class="grid">Pts</th></tr>

<tr><td class="dogs">1</td><td class="dogs2"><a href="results.php?team=Macclesfield">Macclesfield</a></td><td class="dogs">6</td><td class="dogs">6</td><td class="dogs">14</td></tr><tr><td class="dogs">2</td><td class="dogs2"><a href="results.php?team=Eastleigh">Eastleigh</a></td><td class="dogs">6</td><td class="dogs">6</td><td class="dogs">13</td></tr><tr><td class="dogs">3</td><td class="dogs2"><a href="results.php?team=Grimsby">Grimsby</a></td><td class="dogs">6</td><td class="dogs">5</td><td class="dogs">13</td></tr><tr><td class="dogs">4</td><td class="dogs2"><a href="results.php?team=Dover">Dover</a></td><td class="dogs">6</td><td class="dogs">6</td><td class="dogs">11</td></tr><tr><td class="dogs">5</td><td class="dogs2"><a href="results.php?team=Southport">Southport</a></td><td class="dogs">6</td><td class="dogs">2</td><td class="dogs">11</td></tr><tr><td class="dogs">6</td><td class="dogs2"><a href="results.php?team=Barnet">Barnet</a></td><td class="dogs">6</td><td class="dogs">4</td><td class="dogs">10</td></tr><tr><td class="dogs">7</td><td class="dogs2"><a href="results.php?team=Aldershot">Aldershot</a></td><td class="dogs">6</td><td class="dogs">2</td><td class="dogs">10</td></tr><tr><td class="dogs">8</td><td class="dogs2"><a href="results.php?team=Chester">Chester</a></td><td class="dogs">6</td><td class="dogs">1</td><td class="dogs">10</td></tr><tr><td class="dogs">9</td><td class="dogs2"><a href="results.php?team=Altrincham">Altrincham</a></td><td class="dogs">6</td><td class="dogs">1</td><td class="dogs">10</td></tr><tr><td class="dogs">10</td><td class="dogs2"><a href="results.php?team=Lincoln City">Lincoln City</a></td><td class="dogs">6</td><td class="dogs">2</td><td class="dogs">9</td></tr><tr><td class="dogs">11</td><td...

CSS

table.grid2a {font-family:Arial,"Microsoft Sans Serif";font-size:7.5pt;}

table {
  width: 100%;
  border: 1px solid #000; 
  border-collapse: collapse;
  border-spacing: 0; 
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  /*padding: 0.3em; */
  caption-side: bottom; 
    border-spacing: 0;
}

caption {
  padding: 0.3em;
  color: #fff;
  background: #000;
}

th {
/*  background: black;
    color:white; */
}

.odd th, .odd td {
  background: #eee; 
}