[SalesForce] How to get the width of a table inside a LWC to adapt to the widths of its columns

I have made a LWC that is used on an Account page. Unfortunately I had to resort to the use of raw HTML tables, due to all kinds of reasons. The table can have two to four columns, that depends on Account data. I want the widths of the columns to be a specific number of pixels (140 for the first column, 120 for the others) and then the width of the table to adapt to that. This is what it looks like when I have no table style or table-layout: auto.

enter image description here

I have experimented with table-layout: fixed, but that did no good either.

If I specify the width of the table explicity, via style, then the table has that width, but it is independent of the number of columns. And of course a two column table should be much smaller than a four column table.

I am beginning to suspect that the fact that the table is inside an LWC, is affecting its width.

This is a part of my HTML:

<template>
  <table>
    <template iterator:it1={visibilities}>
      <tr key={it1.value.Id}>
        <template iterator:it2={it1.value.Instances}>
          <template if:true={it1.first}>
            <!-- First row: column headers -->
            <template if:true={it2.first}>
              <!-- First row, first column -->
              <th
                style="text-align: center; min-width: 140px;"
                key={it2.value.Id}
              >
                {it2.value.Label}
              </th>
            </template>
            <template if:false={it2.first}>
              <!-- First row, other columns -->
              <th
                style="text-align: center; min-width: 120px;"
                key={it2.value.Id}
              >
                {it2.value.Label}
              </th>
            </template>
          </template>
...
        </template>
      </tr>
    </template>
  </table>
</template>

Update: indeed a LWC takes up all the space it gets from its parent, it's a known issue: https://github.com/forcedotcom/lwc-dev-server-feedback/issues/29

Now I just need a work-around, how to let a LWC take up as little space as needed.

Best Answer

This is actually a function of SLDS, not Aura or LWC specifically.

Try this in a new Lightning Application:

<aura:application>
    <table>
        <tr>
            <td>Example 1</td>
            <td>Example 2</td>
            <td>Example 3</td>
        </tr>
    </table>
</aura:application>

The table is only as wide as it needs to be.

Now, let's add SLDS:

<aura:application extends="force:slds">
    <table>
        <tr>
            <td>Example 1</td>
            <td>Example 2</td>
            <td>Example 3</td>
        </tr>
    </table>
</aura:application>

Now, the table spans the entire width of the page. I didn't do anything other than add SLDS.

To fix this, we can wrap the table in a container:

<aura:application extends="force:slds">
    <div style="display: inline-block">
    <table>
        <tr>
            <td>Example 1</td>
            <td>Example 2</td>
            <td>Example 3</td>
        </tr>
    </table>
    </div>
</aura:application>

This should allow the table to take on only as much space as it needs. You will still need to specify the column widths, of course.