`fitColumns` works in unexpected way

[KES777]

Describe the bug

In this layout mode, columns without a width set are resized to fill any remaining space on the table. If all columns cannot fit on the table then a scrollbar will appear. https://tabulator.info/docs/6.3/layout#fittowidth

Instead of resizing column widths it resizes tabulator table.

Tabulator Info 6.3

Working Example https://drive.google.com/file/d/1TYvtb3rrAveqA6Ea2HYogiFYp4XvSf76/view?usp=sharing

<div class="container-fluid">
        <div class="row">
        <nav class="col-auto col-md-3 sidebar vh-100 d-flex" style="max-width: 200px;">
        	<!-- nav-pills is required to be able to display 'active' items -->
        	<ul class="nav nav-pills flex-column">
                        items here
        	</ul>
        </nav>
                <main class="col content">
                  <div>
                          <div id="btn-panel"></div>
                          <div id="customized-table"></div>
                  </div>

                </main>
        </div>
</div>
<script>
Tabulator( '#customized-table', ... )

</script>

To Reproduce

1. Set layout fitColumns
2. Resize columns manually

The problem is that left side is like fluid (I do not know how it is called in HTML exactly). And main content takes the rest, but once object was created and want to be wider it flows to the down.

Expected behavior scroll bar should appear. I am thinking that after tabulator was created the size should be fixed. Eg. there should be some option like: 'fix size once created'.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux Mint
• Browser FF
• v139

[fint001-boop]

Could you tell me how to solve this problem? I also have this issue when I embed a Tabulator table in the page.

[fint001-boop]

Instead of resizing column widths it pull tabulator table width.

[fint001-boop]

@KES777

[fint001-boop]

@olifolkerd

[KES777]

Could you tell me how to solve this problem? I also have this issue when I embed a Tabulator table in the page.

I do not know how to fix it.

[fint001-boop]

may be need to wait for the next version

---

发件人: Eugen Konkov @.> 发送时间: 2025年7月28日 15:24 收件人: olifolkerd/tabulator @.> 抄送: Finn Hu @.>; Comment @.> 主题: Re: [olifolkerd/tabulator] fitColumns works in unexpected way (Issue #4765)

[https://avatars.githubusercontent.com/u/799021?s=20&v=4]KES777 left a comment (olifolkerd/tabulator#4765)https://github.com/olifolkerd/tabulator/issues/4765#issuecomment-3125885592

Could you tell me how to solve this problem? I also have this issue when I embed a Tabulator table in the page.

I do not know how to fix it.

― Reply to this email directly, view it on GitHubhttps://github.com/olifolkerd/tabulator/issues/4765#issuecomment-3125885592, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BT4237RJDVKEQPEKPBVHGRL3KXF4FAVCNFSM6AAAAACAMMS7D6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCMRVHA4DKNJZGI. You are receiving this because you commented.Message ID: @.***>

[fint001-boop]

@KES777 i know how to fix it.You couldn't put Tabulator table in an element that had the style of flex. you need to set up the width of parent element

example

    <main class="col content">
      <div>
        <div id="btn-panel"></div>
        <div>
          <div id="table-container" style="width:xxxxxxxx(get the parent element width)">
            <div id="customized-table"></div>
          </div>
        </div>
      </div>
    </main>

#4652 https://github.com/olifolkerd/tabulator/issues/4652#issuecomment-2600918297

[fint001-boop]

<div class="container-fluid">
        <div class="row">
        <nav class="col-auto col-md-3 sidebar vh-100 d-flex" style="max-width: 200px;">
        	<!-- nav-pills is required to be able to display 'active' items -->
        	<ul class="nav nav-pills flex-column">
                        items here
        	</ul>
        </nav>
                <main class="col content">
                  <div>
                          <div id="btn-panel"></div>
                          <div>
                                  <div id="table-container" style="width:xxxxxxxx(get the parent element width)">
                                    <div id="customized-table"></div>
                                  </div>
                          </div>
                  </div>

                </main>
        </div>
</div>
<script>
Tabulator( '#customized-table', ... )

</script>