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><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 code above will then produce the table displayed below in Figure 1:

1.png

Figure 1 HTML Table