JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:400px; border: 1px solid red; background-color:lightgrey;overflow:hidden;">
    <table>
        <thead>
            <tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
         </thead>
         <tbody>
         <tr><td><pre> On </pre></td><td><pre> Fred  </pre></td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred long name</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxx    </td></tr>
        </tbody>
    </table> 
 </div>
 </div>
 
 <p/>
 
<div style="width:400px; border: 1px solid red; background-color:lightgrey;overflow:hidden;">
    <table>
        <thead>
            <tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
         </thead>
         <tbody>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred long name</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
        </tbody>
    </table> 
 </div>

CSS

table {
    table-layout:auto;
}
table, th, td
{
    text-align:left;
    white-space:nowrap;
    text-overflow:ellipsis;
}