JSFiddle - React, Tailwind, and code Playground

HTML

<table>
			<caption><cite>Dragonseye</cite> Table of Contents</caption>
			<col>
			<col>
			<col>
			<thead>
				<tr>
					<th scope="col" abbr="Chapter">Chapter Number</th>
					<th scope="col" abbr="Title">Chapter Title</th>
					<th scope="col" abbr="Page">Initial Page Number</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row"></th>
					<td><span>Prologue</span></td>
					<td><span>1</span></td>
				</tr>
				<tr>
					<th scope="row">1</th>
					<td><span>Early Autumn at Fort’s Gather</span></td>
					<td><span>4</span></td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td><span>Gather at Fort</span></td>
					<td><span>49</span></td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td><span>Late Fall at Telgar Weyr</span></td>
					<td><span>64</span></td>
				</tr>
				<tr>
					<th scope="row">4</th>
					<td><span>Telgar Weyr and the College</span></td>
					<td><span>87</span></td>
				</tr>
				<tr>
					<th scope="row">5</th>
					<td><span>Weyrling Barracks and Bitra Hold</span></td>
					<td><span>104</span></td>
				</tr>
				<tr>
					<th scope="row">6</th>
					<td><span>Telgar Weyr, Fort Hold</span></td>
					<td><span>138</span></td>
				</tr>
				<tr>
					<th scope="row">7</th>
					<td><span>Fort Hold</span></td>
					<td><span>162</span></td>
				</tr>
				<tr>
					<th scope="row">8</th>
					<td><span>Telgar Weyr</span></td>
					<td><span>183</span></td>
				</tr>
				<tr>
					<th scope="row">9</th>
					<td><span>Fort Hold and Bitran Borders, Early Winter</span></td>
					<td><span>197</span></td>
				</tr>
				<tr>
					<th scope="row">10</th>
					<td><span>High Reaches, Boll, Ista Weyrs; High Reaches Weyr, Fort, and Telgar Holds</span></td>
					<td><span>217</span></td>
				</tr>
				<tr>
					<th scope="row">11</th>
					<td><span>The Trials at Telgar and Benden Weyrs</span></td>
					<td><span>238</span></td>
				</tr>
				<tr>
					<th scope="row">12</th>
					<td><span>High Reaches and Fort...

CSS

* { margin: 0; padding: 0; }
			html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
			html, tbody th, span {  background: #f7f7ee; }
			table, caption { margin: 0 auto; } /* Application to the caption element addresses Mozilla Bug 297676. */
			table { border-collapse: collapse; }
			caption, th, td { padding: 0.1em 0; }
			caption { text-align: center; font-weight: bolder; }
			thead { display: none; }
			tbody tr { background: url("http://www.myresult.co/images/dot.gif") 0 78% repeat-x; }
			tbody th, td + td { text-align: right; }
			tbody th { padding-right: 0.4em; font-weight: normal; }
			td + td { padding-left: 0.4em; }
			cite { font-style: normal; }
			span { padding: 0 0.2em; white-space: pre; }