JSFiddle - React, Tailwind, and code Playground

HTML

<table>
      <tr>
        <th class="row_header">Row Header</th>
        <th class="fluid">Mon</th>
        <th class="fluid">Tue</th>
        <th class="fluid">Wed</th>
        <th class="fluid">Thurs</th>
        <th class="fluid">Fri</th>
        <th class="weekend">Sat</th>
        <th class="weekend">Sun</th>
      </tr>
      <tr>
        <td>Before Lunch</td>
        <td>This col will be wider than the others because it has lots of content...</td>
        <td></td>
        <td></td>
        <td></td>
        <td>But I would really like them to always be the same size!</td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <style type="text/css">

        table {
            width: 100%;
        }        
 
        td, th {
            border:1px solid black;
        }   
        
        th {
            font-weight:bold;            
            background:red;
        }
        
        .row_header {
            width:50px;
            background:#ccc;
        }
    
        .weekend {
            width:100px;
            background:#ccc;
        }

        .fluid {
            
        }
    
    </style>