How to amend an HTML table column width

The table-layout:auto parameter can be used to amend the width of user created HTML table columns.

Note: By default, the width of the first column is set to 30%.

To amend the column width, set the table-layout:auto variable and then set the width of each column in the table as desired.

The example below would create a table with 10 columns, each taking up 10% of the total width of the table:

<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><th>Key</th><th>Description</th></tr>

</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>

</table></div>

</body>

</card></messageML>

The above code will then produce the table displayed below:

1.png