2

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.

2 Answers 2

3

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.

1
  • And it's sfdcfox to the rescue again! I had tried an extra pair of div, but without the display style. Thanks! May 4, 2020 at 12:47
0

The issue is in the table's width as SLDS defaults to 100% width tables. In HTML/CSS, columns inherit width from set width tables, so what you need to do is say that the table has no width.

All you need to do is set width:auto in the table tag, and you'll be good to go!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .