Dynamic Content - code for altering the the mobile view format?

Dynamic Content - code for altering the the mobile view format?

Hello, I run the site for a public speaker. The person previously in my role had more coding experience than I do, and created a page on the site that using a Dynamic Content box to draw from Zoho CRM to list articles that we've published.

Here is the link to that page: https://www.corgenius.com/articles-and-press
It looks fine in a desktop view, but in mobile view the table gets scrunched up awkwardly. Attached is a screenshot of the mobile view.

Is there some code I can add to the Dynamic Content to make this look better in mobile? I have only a very basic understanding of code, but can figure it out with proper direction.
Thank you!

Here's the code as-it-stands:
{% records = functions.execute("GetData") %}

<table class="auto-style1">
    <tr>
        <td width="20%"><h3>Publication</h3></td>          
         <td width="9%"><h3>Date</h3></td>
         <td width="42%"><h3>Title</h3></td>
        <td width="15%"><h3>Author</h3></td>           
     </tr>
    
{% for record in records %}
    <div>
        <tr>
            <td width="20%"><tableText>{{ record.Pub.name}}</tableText></td>            
            <td width="9%"><tableText>{{ record.Date}}</tableText></td>
            <td width="42%"><a href={{ record.Link_to_Article}}>{{ record.Published_Title}}</a></td>
            <td width="15%"><tableText>{{ record.auth.name}}</tableText></td>            
         </tr>        
      </div>
                
{% endfor %}
    
</table>