JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

<!-- Use divs inside of tds/ths in order to have finer control over the borders -->
<table>
    <thead>
        <tr>
            <th>
                <div style="border-left:3px solid #000; border-top:3px solid #000;">
                    <h3>Header 1</h3>
                </div>
            </th>
			<th>
                <div style="border-left:4px solid #000; border-top:3px solid #000;">
                    <h3>Header 2</h3>
                </div>
            </th>
            <th>
                <div style="border-left:4px solid #000;">
                    <h3>Header 3</h3>
                </div>
            </th>
			<th>
                <div style="border-left: 1px solid #000">
                    <h3>Header 4</h3>
                </div>
             </th>
        </tr>
    </thead>
    <tbody>
		<tr>
		    <td>
                <div style="border-left:3px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
           </td>
			<td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
			<td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
			<td >
                <div style="border-left: 1px solid #000">
                    <p>Some description paragraph text would go here.  A little longer.</p>
                </div>
            </td>
		</tr>
		<tr>
		    <td>
                <div style="border-left:3px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
           </td>
			<td>
                <div style="border-left:4px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
            </td>
			<td>
                <div style="border-left:4px solid...

CSS

/** table layout fixed in order to force equal column widths of 25% */
table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    text-align: left;
    height: 100%;
}

table tr{
    height: 100%;
}

table tr td, table tr th{
    padding:0;
    height: 100%;
    width: 25%;
}

table tr div{
    height: 100%;
    padding: 4px;
}

table tr p, table tr h3{
    padding: 0; 
    margin: 0;
}