JSFiddle - React, Tailwind, and code Playground

by Volker_E

HTML

<table id="dataTable" cellspacing="0">
 <thead>
     <tr>
        <th>Music Title</th>
        <th>Bitrate/File Size</th>
        <th>Download Link</th>
     </tr>
 </thead>
 <tbody>
     <tr>
        <td>Ashiqui 2 - Tum Hi Ho (Punjabi Version) (DjPunja…</td>
        <td>192 kbps 4:31 6.42 mb</td>
        <td><a href="#">Download</a></td>
     </tr>
     <tr>
        <td>Tum Hi Ho (Remixes) - Various Djs[WapBoss.Com…</td>
        <td>195 kbps 4:32 6.34 mb</td>
        <td><a href="#">Download</a></td>
     </tr>
     <tr>
        <td>Ashiqui 2 - Tum Hi Ho (Punjabi Version) (DjPunja...</td>
        <td><?php echo $p['bit'];?></td>
        <td><a href="<?php echo $p['url'];?>">Download</a></td>
     </tr>
 </tbody>
</table>

CSS

body,
td {
    font-family: Arial, Helvetica, sans-serif;
}

#dataTable { /* cellspacing is still necessary on `<table>` */
    width: 70%;
    border: 1px solid #000;
    border-collapse: collapse;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	        hyphens: auto; 
    table-layout: fixed;
    white-space: pre;
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space:   -o-pre-wrap; /* Opera 7 */
    white-space:     -pre-wrap; /* Opera 4-6 */
    white-space:      pre-wrap; /* CSS 3 */
    white-space: pre\9; /* IE7+ */
    word-wrap: break-word; /* IE 5.5-7 */
    word-break: break-all; /* Webkit */
    white-space: normal;
}

#dataTable th {
    padding: 5px;
}

#dataTable th:nth-child(1) {
    color: #0F0;
}
#dataTable th:nth-child(2) {
    color: #F00;
}

#dataTable td {
    border: 1px solid #000;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
#dataTable td:first-child {
    text-align: left;
}