JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="table">
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
        <div class="td">5</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
        <div class="td">5</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
        <div class="td">5</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
        <div class="td">5</div>
    </div>
</div>

JavaScript

//set up for table
$(".table").css("display", "table");
$(".tr").css("display", "table-row");
$(".td").css("display", "table-cell");

//setting up the borders (this is where it gets tricky)
//$(".table").css("border","1px solid #ff0000");

//.table styling we gonna disable cause we gonna style the cells

//$(".td").css("border","1px solid #00ff00");

//notice that the border is thicker for some and for others its not

$(".td").css("border-left","1px solid #00ff00");
$(".td").css("border-top","1px solid #00ff00");

$(".tr .td:last-child").css("border-right","1px solid #00ff00");
$(".tr:last-child .td").css("border-bottom","1px solid #00ff00");