[SalesForce] How to control table width from expanding beyond the browser window

I am working on an aura lightning component that contains an html table and I'm using <aura:iteration /> around the table column <td></td> tag that will iterate over a list of strings and build out the table with the appropriate number of columns based on the number of strings in the list. All of this works fine.

My question is about the table columns expanding beyond the the size of the browser window. Are there options to prevent the table columns expanding beyond the size of the browser window and implementing a way to display the rest of the table using some type of css, slds or maybe jquery would have some way of displaying the rest of the table columns without expanding beyond the browser window size. Is that possible?

Here is my aura component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="TimelineController" access="global" >
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="steps" type="List" />
    
    <table class="slds-table slds-table_cell-buffer slds-table_fixed-layout slds-table_bordered slds-table_col-bordered">        
        <thead>
            <tr class="slds-line-height_reset slds-text-title--caps">
                <aura:iteration items="{!v.steps}" var="step">
                    <th scope="col">
                        <div class="slds-truncate" title="{!step}">{!step}</div>
                    </th>
                </aura:iteration>
            </tr>
        </thead>
        <tbody>        
            <tr class="slds-hint-parent">
                <aura:iteration items="{!v.steps}" var="step">
                    <td>
                        <div class="slds-truncate">Image goes here...</div>
                    </td>
                </aura:iteration>
            </tr> 
        </tbody>
    </table>
    
</aura:component>

The table is building out a timeline and there can be a variable number of steps in the timeline. The headers which I've tried to reduce using some styling as well as adjusting the actual text that is pulled dynamically from an object in Salesforce, but it still expands beyond the browser window. So, I'm looking for any options to create a good UI experience.

Best Answer

Yes, it is possible to set a max width to columns, and furthermore to the table itself in order to avoid expanding beyond the viewport size.

the slds blueprints for the data table give out a file hints on setting widths using the style attribute, but you can achieve the same in a css file with the proper scoping.

Additionally, you can use the slds-max-medium-table_stacked to add responsiveness to the table, this is specially useful for mobile devices, where you have limited space.