html - Dynamic table in Dart: tbody td's don't align with thead td's -

html - Dynamic table in Dart: tbody td's don't align with thead td's -

background: i'm working in dart, making application both client , server side; application co-works mongodb database, uploading/downloading info fill html elements.

i have table within div (to display , hide on events).

html

<div id="divshowtable"> <table id="tabshow"> <thead id="theadshow"> </thead> <tbody id="tbodyshow"> </tbody> </table> <button id="btnback">back</button> <button id="btnnew">new record</button> </div>

i have dart code fills <thead> keys of fields of mongodb collection (dynamically chosen, epends on collection want).

void filltable(list<map> lista) { map m = new map(); m = lista[0]; list<string> lk = new list<string>(); lk = m.keys; /* delete old titles */ tabellashow.thead.innerhtml = ''; tablerowelement trh = tabellashow.thead.addrow(); (int k = 1; k < lk.length; k++) { tablecellelement tch = trh.addcell(); tch.innerhtml=lk.elementat(k); } /* delete old td's */ tabellashow.tbodies[0].innerhtml = ''; (int k = 0; k < lista.length; k++) { m = new map(); m = lista[k]; tablerowelement tr = tabellashow.tbodies[0].addrow(); tr.id = 'rigashow'; (int j = 1; j < lk.length; j++) { tablecellelement tc = tr.addcell(); if (m[lk.elementat(j)] != null && m[lk.elementat(j)] != 'null') tc.innerhtml = m[lk.elementat(j)]; else tc.innerhtml = ''; } } }

yes have tableelement, there no errors. cycles start 1 ignore _id field automatically set mongodb. code, depending on list<map> give, dinamically update , show table related list.

i have 4 possibilities:

1) show table 10 fields.

2) show table 3 fields.

3) show table 2 fields.

4) show table 1 field.

i set width td's (of thead , tbody) 100px, , lastly kid of thead 116px (due scrollbar need), isn't respected.

well, tables 2, 3, 4 it's ok (visually don't see td's not aligned), table 1 very ugly see, td's go want width want.

i tried applying width property dart, css, tried different display values, nil works.

does know how solve this?

problem solved removing in .css:

#tbodyshow, theadshow tr{ display:block; }

html css dart