html - Dart 中的动态表 : tbody td's don't align with thead td's

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>

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

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 开始的循环忽略 _id由 MongoDb 自动设置的字段。 此代码，取决于 List<Map>您提供、动态更新并显示与该列表相关的表格。

我有 4 种可能性:

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

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

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

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

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

好吧，对于表 2、3、4 来说一切正常(视觉上你看不到 td 没有对齐)，但是表 1 非常难看，td 可以按照他们想要的宽度移动想要。

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

有人知道怎么解决吗？

Answer 1

在 .css 中删除这个问题解决了:

#tbodyShow, theadShow tr{
  display:block;
}