JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SQLTable">
<table class="SQLTable">

  <colgroup>
    <col width="0px">
    <col width="430px">
    <col width="200px">
  </colgroup>
  
<thead>
<tr>
<th>NR.</th>
<th>IRGENDWAS + SONSTIGES</th>
<th>DIVERSES</th>
</tr>
</thead>
<tbody>

<tr class="odd"><td><!-- --></td>
<td><a href="#0001">535458265438965495758569628969434545236259632569348384367985</a></td><td>Lorem ipsum</td>
</tr>

<tr class="even"><td><!-- --></td>
<td><a href="#0002">752424754873595479547545356535485248252843976543679827852346</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="odd"><td><!-- --></td>
<td><a href="#0003">578692376732543482373736469789385379738438475985634727934635</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="even"><td><!-- --></td>
<td><a href="#0004">836235853858498389364763465365643952684645657569398347974539</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="odd"><td><!-- --></td>
<td><a href="#0005">489373953983283727235459476342848256572389523763498365767324</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="even"><td><!-- --></td>
<td><a href="#0006">987636754876865676938956752383569459894698673647498784798549</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="odd"><td><!-- --></td>
<td><a href="#0007">586539549536456489479484962735876727469365793869358325359356</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="even"><td><!-- --></td>
<td><a href="#0008">646393763564567875638965878529329285375938242746495894634984</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="odd"><td><!-- --></td>
<td><a href="#0009">485289356793676982534828745472787893875853835834347386593498</a></td><td>Lorem Ipsum</td>
</tr>

<tr class="even"><td><!-- --></td>
<td><a href="#0010">493298749259585252485434568675375393563675496469686493954989</a></td><td>Lorem Ipsum</td>
</tr>

</tbody>
</table>
</div>

CSS

table                           {counter-reset: rowNumber; counter-reset: headings 0}
table tr                        {counter-increment: rowNumber}
table tr td:first-child::before {content: counter(rowNumber)}
table tr td:first-child::after  {content:"."}
table tr td:first-child         {text-align:right; padding-right:15px}

/* ##################################################################################### */

*                               {font:normal 16px /*arial*/ consolas, sans-serif; color:#333}
body                            {/*overflow-y:scroll;*/ margin:0; padding:0}
table.SQLTable                  {width:97%; margin:0 auto; border-spacing:1px; border-collapse:separate}

table.SQLTable thead tr         {background:#f0f0f0; text-shadow: 1px 1px 1px #fff}
table.SQLTable th               {font-weight:normal}

table.SQLTable td, 
table.SQLTable th               {padding:5px 15px 5px 15px; text-align:left}

table.SQLTable th:first-child   {text-align:right}
table.SQLTable th:nth-child(2)  {color:green}

table.SQLTable tr               {background:#f0f0f0}
table.SQLTable tr.odd           {background:#f9f9f9}


a                               {display:block; padding:7px 0; text-decoration:none; outline:0}
a:link                          {color:#5453bf}
a:visited                       {color:#5453bf}
a:focus                         {color:#cf5a5a; text-decoration:underline}
a:hover                         {color:#cf5a5a; text-decoration:underline}
a:active                        {color:#cf5a5a; text-decoration:underline}

::-moz-selection                {color:white; background:#777}
::selection                     {color:white; background:#777}
thead tr ::-moz-selection       {color:#333; background:transparent}
thead tr ::selection            {color:#333; background:transparent}