从Ui小部件中删除不可见的空间

Question

function doGet() {
  var app = UiApp.createApplication();
  var flex = app.createFlexTable();
  for (var i = 1; i<=30; i++) 
    flex.setWidget(i, 0, app.createButton('Button '+i).setId('Button'+i).setVisible(false));
  app.getElementById('Button1').setVisible(true);

  var submit = app.createButton('Submit');
  app.add(flex).add(submit); 
  return app;
}

制作this Ui。

我们如何消除第一个可见按钮和“提交”按钮之间的空白区域？

Answer 1

空间来自各种HTML元素的浏览器特定样式，例如，每个隐藏行应用2px边框间距。 （我在Chrome中测试;对于其他浏览器可能会有所不同。）

我建议使用CSS重置来清除所有特定于浏览器的样式。像这样的简单修复了你的间距问题（再次，在Chrome中）：

div, table, tbody, tr, td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}