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）显示一个包含1个字段的表。

我将td＆＃39; s（thead和tbody）的宽度设置为100px，并将thead的最后一个子设置为116px（由于我需要滚动条），但它没有得到尊重。< / p>

嗯，对于表2,3,4，它们都没问题（视觉上你没有看到td＆＃39; s没有对齐），但表1看起来非常难看，td＆＃39; s以他们想要的宽度去他们想要的地方。

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

有谁知道如何解决这个问题？

Answer 1

问题解决了.css中的删除：

#tbodyShow, theadShow tr{
  display:block;
}

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

1 个答案: