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>，动态更新并显示与该列表相关的表格。

我有四种可能：

1) 显示一个包含 10 个字段的表格。

2) 显示一个包含 3 个字段的表格。

3) 显示一个包含 2 个字段的表格。

4) 显示一个包含 1 个字段的表格。

我将 td（tad 和 tbody）的宽度设置为 100 像素，将 thead 的最后一个子项设置为 116 像素（由于我需要滚动条），但没有得到尊重。

好吧，对于表 2、3、4，一切正常（从视觉上看，您看不到 td 未对齐），但表 1 非常难看，td 以他们想要的宽度去到他们想要的地方想要。

我尝试应用 Dart 和 CSS 的 width 属性，尝试了不同的 display 值，但没有任何效果。

有人知道怎么解决吗？

Answer 1

问题解决了在 .css 中删除它：

#tbodyShow, theadShow tr{
  display:block;
}