Dart 中的动态表：tbody td 与 thead td 不对齐

Question

背景:我在Dart工作，使客户端和服务器端应用程序;这个应用程序与MongoDb数据库协作，上传/下载数据来填充一些HTML元素。

我在div中有一个表(在某些事件中显示和隐藏它)。

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>

我有一个Dart代码，用mongoDb集合的字段的键填充<thead>(动态选择，取决于您想要的集合)。

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();
  for (int k = 1; k < lk.length; k++) {
      TableCellElement tch = trh.addCell();
      tch.innerHtml=lk.elementAt(k);
    }
  /* Delete old td's */
  tabellaShow.tBodies[0].innerHtml = '';
  for (int k = 0; k < lista.length; k++) {
    m = new Map();
    m = lista[k];
    TableRowElement tr = tabellaShow.tBodies[0].addRow();
    tr.id = 'rigaShow';
    for (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 = '';
    }
  }
}

是的，我有TableElement，没有错误。对于从1开始的周期，忽略MongoDb自动设置的_id字段。根据您提供的List<Map>，此代码将动态更新并显示与该列表相关的表。

我有4种可能:

1)显示一个有10个字段的表。

2)显示一个有3个字段的表

3)显示一个有2个字段的表

4)显示一个只有一个字段的表

我设置了宽度的td's(头和主体)为100px，和头的最后一个子为116px(由于滚动条我需要)，但它不尊重。

嗯，对于表2,3,4来说，这一切都很好(从视觉上看，你没有看到td没有对齐)，但是表1看起来非常非常难看，td在他们想要的地方，他们想要的宽度

我试着从Dart应用宽度属性，从CSS，尝试不同的display值，但没有工作。

有人知道怎么解决这个问题吗?

Answer 1

问题解决了。css:

#tbodyShow, theadShow tr{
  display:block;
}