JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p1"><b>INDICES DE VITESSE</b></p>
<table class="table2">
	<tr>
		<th>Indice</th>
		<th>Vitesse</th>
		<th>Indice</th>
		<th>Vitesse</th>
		<th>Indice</th>
		<th>Vitesse</th>
	</tr>
	<tr>
		<td><b>A1</b></td>
		<td>5 km/h</td>
		<td><b>D</b></td>
		<td>65 km/h</td>
		<td><b>Q</b></td>
		<td>160 km/h</td>
	</tr>
  </table>

CSS

td, th { /* Mettre une bordure sur les td ET les th */ 
	font-size: 0.9em;
  border: 1px solid black;
	padding: 2px 8px 2px 8px;
}

.table2 {
	border-collapse: collapse;
	margin-left: 310px;
}


		/* NE FONCTIONNE PAS censé rendre les tableaux responsives */
    document.querySelectorAll('.table-responsive').forEach(function (table) {
    let labels = Array.from(table.querySelectorAll('th')).map(function (th) {
        return th.innerText
    })
    table.querySelectorAll('td').forEach(function (td, i) {
        td.setAttribute('data-label', labels[i % labels.length])
    })
}) -->