How to amend an HTML table column width

If a customer is trying to create an HTML table and wishes to amend the default width of the columns, use the table-layout:auto variable to amend the width of the table columns as desired.


By default, the width of the first column is set to 30% which may be too large for some customers and can make the formatting look unpleasant.


To rectify this, in the example below, the table-layout:auto variable has been set and the table would contain 10 columns, each with a width of 10% of the entire table (highlighted in red):


<messageML><card accent='tempo-bg-color--blue'>

<header>Example Heading</header>

<body>Example:<br/><div><table style='border-collapse:collapse;table-layout:auto;width:100%'><thead>



<tr><td style='width:10%'>1</td><td>Analyst Meeting 1-1</td></tr>

<tr><td style='width:10%'>2</td><td>Analyst Meeting 2-1</td></tr>

<tr><td style='width:10%'>3</td><td>Analyst Meeting Group</td></tr>

<tr><td style='width:10%'>4</td><td>Bespoke Work</td></tr>

<tr><td style='width:10%'>5</td><td>Chat/Email</td></tr>

<tr><td style='width:10%'>6</td><td>Corporate Access - Small Group</td></tr>

<tr><td style='width:10%'>7</td><td>Corporate Access 1-1</td></tr>

<tr><td style='width:10%'>8</td><td>Corporate Access 2-1</td></tr>

<tr><td style='width:10%'>9</td><td>Deal Roadshow</td></tr>

<tr><td style='width:10%'>10</td><td>Entertainment / Industry Event</td></tr>





The code above will then produce the table displayed below in Figure 1:



Figure 1 HTML Table


Please refer to this article for further information.