Button Placement Inside Table

Store Design
,

Topic summary

A user is customizing Shopify’s “Shipping Update” email template and wants to display three buttons in a single row with consistent styling.

Current Issues:

  • Buttons don’t maintain equal width regardless of text length
  • White borders appear around buttons that don’t match default Shopify email button styling
  • When attempting to style borders, all three buttons get bordered together instead of individually
  • No spacing exists between buttons

Attempted Solution:
Another user provided HTML/CSS code using a table structure with:

  • width: 33.33% for equal button sizing
  • margin: 5px for spacing
  • Custom border and background color styling

However, the original poster reported this solution did not work and shared their complete email template code for further troubleshooting. The discussion remains unresolved with no working solution yet provided.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hey,

I want to style the “Shipping Update” mail from Shopify but can´t get it to work like I want.
The goal is to get 3 buttons in one line, like i did with the code below.

How can I make sure that the buttons are always the same size, regardless of the text inside.
Also, the buttons with the white border does not look like the buttons that are in the mail by default.
The border does not come from the styling.
I tried coloring the border in red with styling, instead it has all 3 buttons bordered together instead of each one individually.
It would also be nice if there was some space between the individual buttons to make it look cleaner.

Bildschirmfoto 2025-03-02 um 18.06.38.jpg
Bildschirmfoto 2025-03-02 um 18.06.38.jpg1206×370 48.2 KB

 
Bestellung online ansehen Sendung verfolgen Rechnung herunterladen
2

Try:


   

  
    

| <br>          Bestellung online ansehen<br>         | <br>          Sendung verfolgen<br>         | <br>          Rechnung herunterladen<br>         |
| - | - | - |

CSS:

.button-container {
  width: 100%;
  text-align: center;
}

.button__cell {
  background: {{ shop.email_accent_color }};
  text-align: center;
  padding: 10px;
  margin: 5px;
  border: 1px solid white;
  width: 33.33%; /* Ensures equal button width */
}

.button__text {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 12px 20px;
  font-weight: bold;
  border-radius: 5px;
  background-color: {{ shop.email_accent_color }};
  width: 100%;
  text-align: center;
}

.button__text:hover {
  opacity: 0.8;
}
3

Thanks for your help but it did not work.

(the bottom below was the old one just for testing)

Bildschirmfoto 2025-03-02 um 19.17.38.jpg
Bildschirmfoto 2025-03-02 um 19.17.38.jpg1246×392 37.7 KB

This is the complete html mail code from the file.


  
  
  
  
  
  
    

    

  

    <table>

      
        
          <table>

  
    
      

        <table>

          
            

              <table>

                <tr>

                  <td>

                    {%- if shop.email_logo_url %}
                      
                    {%- else %}
                      # 
                        {{ shop.name }}
                      
                    {%- endif %}
                  

</td>

                    <td>

                      
                        Bestellung {{ order_name }}
                      
                    

</td>

                </tr>

              </table>

            
          
        </table>

      
    
  
</table>

          <table>

  
    
      
        <table>

          
            
              
            ## {{ email_title }}
            

{{ email_body }}

              
            {% if order_status_url %}
              <table>

<tr>

  <td>

 

</td>

</tr>

  
    <table>

      <tr>

        <td>

          Bestellung online ansehen
        

</td>

        <td>

          Sendung verfolgen
        

</td>

        <td>

          Rechnung herunterladen
        

</td>

      </tr>

    </table>
  

                
  
     
  
  
    
      <table>

        <tr>

          <td>

Bestellung online ansehen

</td>

        </tr>

      </table>
      {% if shop.url %}
    <table>

    </table>
{% endif %}

    
  
</table>

            {% else %}
              {% if shop.url %}
    <table>

      
        
          <table>

            <tr>

              <td>

Zu unserem Shop

</td>

            </tr>

          </table>
        
      
    </table>
{% endif %}

            {% endif %}
            {% if fulfillment.tracking_numbers.size > 0 %}
  

    

    {% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
      {{ fulfillment.tracking_company }} Trackingnummer: {{ fulfillment.tracking_numbers.first }}
    {% elsif fulfillment.tracking_numbers.size == 1 %}
      Trackingnummer: {{ fulfillment.tracking_numbers.first }}
    {% else %}
      {{ fulfillment.tracking_company }} trackingnummern:

      {% for tracking_number in fulfillment.tracking_numbers %}
        {% if fulfillment.tracking_urls[forloop.index0] %}
          
            {{ tracking_number }}
          
        {% else %}
            {{ tracking_number }}
        {% endif %}
        

      {% endfor %}
    {% endif %}
  

{% endif %}

            
          
        </table>
      
    
  
</table>

          <table>

  
    
      
        <table>

          <tr>

            <td>

              ### Artikel in dieser Lieferung
            

</td>

          </tr>

        </table>
        <table>

          
            
              
            

  {% for line in fulfillment.fulfillment_line_items %}
  {% endfor %}
<table>

    
      <table>

        <tr>
<td>

          {% if line.line_item.image %}
            
          {% endif %}
        

</td>

        <td>

          {% if line.line_item.product.title %}	
            {% assign line_title = line.line_item.product.title %}	
          {% else %}	
            {% assign line_title = line.line_item.title %}	
          {% endif %}

          {% if line.quantity < line.line_item.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.line_item.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.line_item.quantity  %}
          {% endif %}

          {{ line_title }} × {{ line_display }}

          {% if line.line_item.variant.title != 'Default Title' %}
            {{ line.line_item.variant.title }}

          {% endif %}

          {% if line.line_item.selling_plan_allocation %}
            {{ line.line_item.selling_plan_allocation.selling_plan.name }}

          {% endif %}

          {% if line.line_item.refunded_quantity > 0 %}
            Zurückerstattet
          {% endif %}

          {% if line.line_item.discount_allocations %}
            {% for discount_allocation in line.line_item.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                
                  
                  
                    {{ discount_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  
                
              {% endif %}
            {% endfor %}
          {% endif %}
        

</td>

      </tr>
</table>
    
  </table>

            
          
        </table>
      
    
  
</table>

          <table>

  
    
      
        <table>

          <tr>

            <td>

              
              

Falls du Fragen hast, kontaktiere uns unter 

        

</td>

      </tr>

    </table>