JSFiddle - React, Tailwind, and code Playground

by blunderboy

HTML

<table>
<!--col id="col1">
<col id="col2">
<col id="col3">
<col id="col4"-->
    <thead>
        <tr>
            <th> Batsman </th>
            <th> Score </th>
            <th> Strike Rate </th>
            <th> Average </th>
        </tr>
    </thead>
                
    <tr class="odd">
        <td class="lp"> Sachin1 is trying css and lets check the table cell size if fixed or not </td>
        <td class="br"> Sachin2 </td>
        <td class="visits"> Sachin3 </td>
        <td class="status"> Sachin4 </td>
    </tr>
            </table>

CSS

table {
    color:#FFF;
    background-color: #7D91A7;
    border:2px solid #75737A;
    border-collapse:collapse;
    table-layout: fixed;
    /*width: 600px;*/
}
thead th
{
     border-bottom:1px dotted #FFF;
     padding-bottom: 5px;
     text-align:left;
}

tr {
    padding: 10px 0px 10px 0px;
}

tr.odd {
    background-color: #A0A6AF;
}
.lp {
    width: 300px;
}

.br {
    width: 100px;
}

.visits {
    width: 130px;
}

.status {
    width: 120px;
}