Table Column Header Width Is Not Working, When The Table Data ...

Skip to content Dismiss alert {{ message }} Mottie / tablesorter Public

• Notifications You must be signed in to change notification settings
• Fork 754
• Star 2.6k

• Code
• Issues 248
• Pull requests 10
• Actions
• Projects
• Wiki
• Security
• Insights

Additional navigation options

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom Table column header width is not working, when the table data length is high #1656 Open RajuTicvic opened this issue Apr 13, 2019 · 6 comments Open Table column header width is not working, when the table data length is high #1656 RajuTicvic opened this issue Apr 13, 2019 · 6 comments Labels Demo How To...

Comments

Copy link

RajuTicvic commented Apr 13, 2019 • edited by Mottie Loading

Hi, I set the table column width using <colgroup><col width=""></colgroup>. when the table data length is too much its not working.

All reactions RajuTicvic changed the title Table column header not working Table column header width not working, when the table data length is high Apr 13, 2019 Copy link Owner

Mottie commented Apr 13, 2019 • edited by ghost Loading

Hi @RajuTicvic! I'd recommend using a class name on the header to set the width. When you use <colgroup> you need to create one for each column (demo). HTML <th class="organizations">Organizations</th> CSS .organizations { width: 10%; } If your table data gets updated and the columns resize, then set the widthFixed option to true.

All reactions Mottie added Demo How To... labels Apr 13, 2019 Copy link Author

RajuTicvic commented Apr 13, 2019

@Mottie , Already i tried this one, and also used nth-child css selector but not working for me

All reactions Copy link Owner

Mottie commented Apr 13, 2019

Please update that demo so I can help troubleshoot the problem.

All reactions Copy link Author

RajuTicvic commented Apr 25, 2019 • edited Loading

My code is here. <thead> <tr> <th rowspan="2"><input type="checkbox" id="selectAll_network" class="check"></th> <th rowspan="2">Name</th> <th rowspan="2">Mgmt. Address</th> <th rowspan="2">Type</th> <th rowspan="2">Software Version</th> <th rowspan="2">Owner</th> <th rowspan="2">Site ID</th> <th rowspan="2" class="organizations" >Organizations</th> <th rowspan="2">Snapshots</th> <th colspan="4" class="text-center">Status</th> </tr> <tr> <th>Config Synchronized</th> <th>Reachability</th> <th>Service</th> <th>Locked</th> </tr> </thead> <tbody> @if($devicesCount > 0) @php $i=1; @endphp @foreach ($devicesList as $devices) <tr> <td><input type="checkbox" class="check"></td> <td><a href="javascript:void(0);" onclick="innerConfiguration(<?php echo $i ?>)">@if(isset($devices['name'])){{ $devices['name'] }}@endif</a> <input type="hidden" name="devicesname" id="devicesname{{$i}}" value="@if(isset($devices['name'])){{ $devices['name']}}@endif"> </td> <td>@if(isset($devices['ipAddress'])){{ $devices['ipAddress'] }}@endif</td> <td>@if(isset($devices['type'])){{ $devices['type'] }}@endif</td> <td> @if(isset($devices['createdAt'])){{\Carbon\Carbon::parse($devices['createdAt'])->format('d/m/Y H:i:s')}}@endif </td> @php if(isset($devices['softwareVersion'])) { header('Content-Type: text/html; charset=utf-8'); $softwareVersion = $devices['softwareVersion']; $softwareVersion = mb_substr($softwareVersion, 0, 10, "UTF-8"); } @endphp <td>{{ $softwareVersion}}</td> <td> @if(isset($devices['branchId'])) {{$devices['branchId']}} @else -- @endif </td> <td>@if(isset($devices['orgs'])){{ implode(",",$devices['orgs']) }}@endif</td> <td class="text-center"><img src="https://img.icons8.com/material-outlined/18/5D5D5D/stack-of-photos.png"> </td> <td class="text-center"> @php if(isset($devices['cpeHealth'])){ if($devices['cpeHealth']['rows'][1]['firstColumnValue']=='Config Sync Status') { $cpekey = array_keys(array_filter($devices['cpeHealth']['rows'][1]['columnValues'])); echo $devices['cpeHealth']['columnNames'][$cpekey[0]+1]; } } @endphp </td> <td class="text-center"> @php if(isset($devices['applianceStatus']['cpeHealth'])){ if($devices['cpeHealth']['rows'][2]['firstColumnValue']=='Reachability Status') { $cpekey = array_keys(array_filter($devices['cpeHealth']['rows'][1]['columnValues'])); echo $devices['cpeHealth']['columnNames'][$cpekey[0]+1]; } } @endphp </td> <td> @php if(isset($devices['cpeHealth'])){ if($devices['cpeHealth']['rows'][3]['firstColumnValue']=='Service Status') { $cpekey = array_keys(array_filter($devices['cpeHealth']['rows'][1]['columnValues'])); echo $devices['cpeHealth']['columnNames'][$cpekey[0]+1]; } } @endphp </td> <td class="text-center"><img src="https://img.icons8.com/material-outlined/18/5D5D5D/unlock.png" alt=""></td> </tr> @php $i++; @endphp @endforeach </tbody> @else <h2 text-align="center">No records</h2> @endif </table> $("#dev_table") .tablesorter({ theme: 'blue', widthFixed: true, headers: { 0: { sorter: false, filter: false } }, widgets: ['zebra', 'filter', 'columnSelector', 'scroller'], widgetOptions: { } })

All reactions RajuTicvic changed the title Table column header width not working, when the table data length is high Table column header width is not working, when the table data length is high Apr 25, 2019 Copy link Owner

Mottie commented Apr 25, 2019

Try adding this css (demo): td { word-break: break-word; }

All reactions Copy link Author

RajuTicvic commented Apr 29, 2019

Thanks @Mottie, i found the issues which the table "table-layout:fixed", just i remove the css property now its working fine.

All reactions Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees No one assigned Labels Demo How To... Projects None yet Milestone No milestone Development

No branches or pull requests

2 participants You can’t perform that action at this time.