topic How to make table cells line up within a table in Web AppBuilder Custom Widgets Questions

How to make table cells line up within a table

PavelVeselský1 — Wed, 08 Jun 2016 11:52:40 GMT

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?

Re: How to make table cells line up within a table

PavelVeselský1 — Tue, 21 Jun 2016 13:55:18 GMT

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.