Блог

Предыстория: я работаю в 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 <thead> , который заполняет ключами полей коллекции 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 amp;amp; 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 полем.

Я установил ширину для td (для ad и tbody) в 100 пикселей, а для последнего дочернего элемента ad — в 116 пикселей (из-за нужной мне полосы прокрутки), но это не соблюдается.

Ну, для таблиц 2, 3, 4 все в порядке (визуально вы не видите, что td не выровнены), но таблица 1 выглядит очень и очень некрасиво, td идут туда, куда хотят, с нужной шириной.

Я попытался применить свойство width из Dart, из CSS, пробовал разные display значения, но ничего не работает.

Кто-нибудь знает, как это решить?

Проблема решена, удалив это в .css:

 #tbodyShow, theadShow tr{
  display:block;
}