I am currently working on a responsive table that needs to display correctly on both desktop and mobile devices. However, I have run into an issue where long text in the table gets truncated on mobile devices, compromising the responsiveness of the design. Here is a screenshot of the problem on mobile: https://i.sstatic.net/vrUjul.png
I have tried various solutions from different tutorials, but none have successfully resolved the issue. Can anyone suggest the best way to fix this problem?
-- EDIT -- The HTML code for the table:
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr>
<th scope="row">{{name}}</th>
<td class="text"><span>{{email}}</span></td>
<td class="text"><span>{{password}}</span></td>
</tr>
{{/each}}
</tbody>
Currently, I am not using any custom CSS for the table, except for the background color.