how to add a width css to table column (html table) for email template in outlook?

I want to add width to the column (HTML table) for developing a email template for Outlook. But when I add the property it does not reflect in the email. I have tried doing the below things.

<table
  cellspacing="0"
  cellpadding="0"
  style="table-layout: fixed; border-collapse: collapse; width: 100%"
>
  <tbody>
    <tr style="background-color: #1890ff">
      {% for item in first_table_column_names %}
      <td
        width="30%"
        style="border: 1px solid #000000; color: #ffffff; padding: 5px"
      >
        {{item.name}}
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>

I have also done

<table border="0" cellpadding="0" cellspacing="0" width="580" style="background-color: #0290ba;">

This thing does not work in Outlook Application in PC and the table gets distorted. Any kind of help would be appreciated.

Solution

Please try the html mailer by nesting tables.

Please find the the below code. This may help you.

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; border-collapse: collapse; width: 100%">
  <tbody>
    <tr style="background-color: #1890ff">
      {% for item in first_table_column_names %}
      <td width="100%" style="border: 1px solid #000000; color: #ffffff; padding: 5px">
        <table cellspacing="0"cellpadding="0">
          <tr>
            <td style="width:30%;background-color:red;">
              {{item.name}}
            </td>
          </tr>
          
        </table>
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>