Table column width

[filozof595]

Table column width inside tab

Problem

I have a tabular menu and in each tab a table. I have set the class for width as described in docs inside the <th> tag.

<div class="ui secondary pointing menu">
                <a class="item active" data-tab="tab1">Tab1</a>
                <a class="item mobile hidden" data-tab="tab2">Tab2</a>
                <a class="item mobile hidden" data-tab="tab3">Tab3</a>

            <div class="ui tab segment active" data-tab="tab1">
            <table class="ui table" id="table1">
                    <thead>
                        <tr>
                            <th class="one wide center aligned">Title1</th>
                            <th class="two wide center aligned">Title2</th>
                            <th class="two wide center aligned">Title3</th>
                            <th class="two wide center aligned">Title4</th>
                            <th class="nine wide">Title5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="center aligned"><i class="green check circle outline icon"></i></td>
                            <td class="center aligned selectable">
                                <a href="{% url 'projekti' %}">52-01</a>
                            </td>
                            <td class="center aligned">R00</td>
                            <td class="center aligned">01.08.2019.</td>
                            <td>Test</td>
                        </tr>
                    </tbody>
                </table>
                </div>
              <div class="ui tab segment mobile hidden" data-tab="Tab2">
                <table class="ui table" id="table2">
                    <thead>
                        <tr>
                            <th class="one wide center aligned">Title1</th>
                            <th class="two wide center aligned">Title2</th>
                            <th class="two wide center aligned">Title3</th>
                            <th class="two wide center aligned">Title4</th>
                            <th class="nine wide">Title5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="center aligned"><i class="green check circle outline icon"></i></td>
                            <td class="center aligned selectable">
                                <a href="{% url 'projekti' %}">52-01</a>
                            </td>
                            <td class="center aligned">R00</td>
                            <td class="center aligned">01.08.2019.</td>
                            <td>Test</td>
                        </tr>
                    </tbody>
                </table>
            </div>

$('.menu .item')
        .tab();

On page load whatever tab i set to active (with the class active inside the <div> tag) the table is rendered correctly (one, two, two, two, nine widths) all other tabs are rendered as an equal width table.

What I'm doing wrong?
Thanks!

Edit

Now i see that Datatables are messing with the table rendering:
https://jsfiddle.net/fuzsL0kc/

[lubber-de]

I am not sure if i understood your question/issue correctly but making use of your fiddle you can adjust the column widths, so left row for example becomes five wide column and the second becomes eleven wide column Tables do not overlay the left menu (unless you reduce the width even more)...
https://jsfiddle.net/81rkazL5/

[maidzen]

@lubber-de in his JSfiddle the column width in none-active Tabs is equal instead of based on the width class given

[lubber-de]

Ah ❗️ , now i see 😄

[filozof595]

I am not sure if i understood your question/issue correctly but making use of your fiddle you can adjust the column widths, so left row for example becomes five wide column and the second becomes eleven wide column Tables do not overlay the left menu (unless you reduce the width even more)...
https://jsfiddle.net/81rkazL5/

I don have problems with the left menu. They overlay only in JSFiddle. The problem is inside tabs and with the table.
If you click on the Tab1 you will see the table is rendered with colum width one, two, two, two, nine, but when you click on the Tab2 the table colums are rendered as equal width.

Im talking with ColinFrick on Discord and this is his reply:

DataTables calculates the column width, problem is that the tables in the not-active tabs are not visible so all widths are set to 0px

Does anyone know if i can do anything to get this working?

[lubber-de]

Initiate DataTables with the option

autoWidth: false,

See https://jsfiddle.net/c0uykeq1/

[lubber-de]

btw there is a bug in datatables when calculating: It basically calculates correct percentage values width but adds "px" (so "12.5px" instead of "12.5%", thus it's broken)

[filozof595]

Initiate DataTables with the option

autoWidth: false,

See https://jsfiddle.net/c0uykeq1/

This solution worked for me.
Thanks!

[lubber-de]

There is a PR for datatables to fix column width calculation correctly
DataTables/DataTables#345 (comment)