Is there a way to have fixed-width columns?

[pdore-netfore]

No description provided.

[brunofin]

table.md-table td.md-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 100px;
    max-width: 100px;
}

[daniel-nagy]

You can set the width of the cells as @brunofin did or if you want all the cells to be the same width, but not necessarily a specific width, you can set the table-layout property to fixed.

table.md-table {
    table-layout: fixed;
}

[pdore-netfore]

@daniel-nagy This breaks the header layout when used with https://github.com/daniel-nagy/fixed-table-header

[daniel-nagy]

I believe I need to change line 94 from

clone.css('minWidth', style.width);

to

clone.css({minWidth: style.width, maxWidth: style.width});

But if you are using table-layout: fixed; you will probably also want to allow the header cells to wrap text.

table.md-table th {
    white-space: normal !important;
}

But I wouldn't recommend using table-layout: fixed; in the first place because your table will end up looking something like this

As you can see, instead of scrolling horizontally the columns bleed into one other to fit on the page. Instead I would give each column the same percentage width. This will set the width of the column to max(naturalWidth, percentWidth) and the table will scroll horizontally if it needs to.

// number of columns not counting the first column if row selection is enabled
@column-count: 7;

// :not(.clone) may or may not be necessary
// without checkboxes
table.md-table:not(.clone) {
  th {
    width: (100% / @column-count);
  }
}

// with checkboxes
table.md-table.md-row-select:not(.clone) {
  th:nth-child(n+2) {
    width: (100% / @column-count);
  }
}

[brunofin]

I'm using a mixin in my SCSS: to set a width to each column including its header. The column with width not set will most likely fill the remaining space.

@mixin table-cell-width($child, $width, $padding: 0px) {
  td.md-cell:nth-child(#{$child}),
  th.md-column:nth-child(#{$child}) {
    min-width: $width !important;
    max-width: $width !important;
    padding: $padding !important;
  }
}

// then...

  @include table-cell-width(1, 20px);
  @include table-cell-width(2, 16px);
  @include table-cell-width(3, 39px, 0 15px 0 0);
  @include table-cell-width(4, 40px);
  @include table-cell-width(5, 90px, 0 15px 0 0);
  @include table-cell-width(6, 170px, 0 15 0 0);
  @include table-cell-width(7, 65px, 0 15px 0 0);
  @include table-cell-width(8, 30px, 0 15px 0 0);
  @include table-cell-width(9, 40px, 0 15px 0 0);
  @include table-cell-width(10, 70px, 0 15px 0 0);
  @include table-cell-width(11, 40px, 0 15px 0 0);
  @include table-cell-width(12, 70px);

[ferchoman09]

I need the same too. Is it possible use the the https://github.com/daniel-nagy/fixed-table-header and column fixed in the same table?