Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't have table fill container with variable sized columns

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior This is using the bootstrap theme.

The columnMode standard only makes the table 750px wide, except for the footer which seems to fill the container. The individual columns don’t expand to fit their content. The table can be manually resized with the mouse to use more width, but it doesn’t happen automatically.

In columnMode force the table does fill the container, but all columns are the same width and can’t be resized.

In columnMode flex, columns are different widths in every row!

Expected behavior I’d like to see behaviour akin to

in columnMode standard. The columns should automatically set width to best fit their content and to fill the container.

Reproduction of the problem ngx-datatables

What is the motivation / use case for changing the behavior? Seems pretty obvious, I want my table to fill my container

Please tell us about your environment: npm, mac os

Table version: 13.1.0
Angular version: 6.1.9
Browser: all
Language: TypeScript 2.92

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:5

Top GitHub Comments

8reactions

atluriajithcommented, Oct 11, 2018

Facing the same issue.

0reactions

wtravOcommented, Jul 17, 2020

Bump.

Top Results From Across the Web

Set the table column width constant regardless of the amount ...

If the table has a width , even using table-layout: fixed the columns width will not be fixed because some columns will get...

table-layout - CSS: Cascading Style Sheets - MDN Web Docs

The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.

CSS- Div- Be Careful When You Size Your Divs

Consider one of the simplest layouts around: two columns placed side-by-side. ... It makes sense: both DIVs and tables can be nested, have...

Table Layouts - W3C

Rows, columns, row groups, column groups, and cells may have borders drawn ... The width of the table wrapper box is the border-edge...

CSS Table Size (Width and Height) - W3Schools

Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant ......