Button Placement Inside Table

[Ben_Simon]

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.

 

Bestellung online ansehen

Sendung verfolgen

Rechnung herunterladen

[Ben310]

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;
}

[Ben_Simon]

Thanks for your help but it did not work.

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

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>