How to make table cells line up within a table

1071
1
Jump to solution
06-08-2016 04:52 AM
PavelVeselský1
New Contributor III

Almost everywhere else table cells are equally wide within a column. It doesn't work like this in my WAB widget. I suppose that's some bug/ feature in Jimu or in JS API, though it might have been triggered by integration into MVC​. It's the same for table tag and for divs with display:table. Do it need to be div with some specific class, except for a custom one? One possible solution would be to set the width values, but this might make it ugly for column names much bigger/smaller than expected and making this part of CSS code locale-dependent is a lot of work. So how can I base the cell width on the widest content in the column?

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
PavelVeselský1
New Contributor III

I did it through min-width:

.jimu-widget-myWidget #main-form-table {

    width: 100%;

    min-width: 300px;

}

.jimu-widget-myWidget .col-head {

    min-width:100px;

}

.jimu-widget-myWidget .col-cell {

    min-width:200px;

}

This way the table looks like a table and it won't break if something is too long.

View solution in original post

1 Reply
PavelVeselský1
New Contributor III

I did it through min-width:

.jimu-widget-myWidget #main-form-table {

    width: 100%;

    min-width: 300px;

}

.jimu-widget-myWidget .col-head {

    min-width:100px;

}

.jimu-widget-myWidget .col-cell {

    min-width:200px;

}

This way the table looks like a table and it won't break if something is too long.