gwt - 从不可见的 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;
}

产生这个 Ui。

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

Answer 1

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

我建议使用 CSS 重置来清除所有特定于浏览器的样式。像这样一个简单的方法可以解决您的间距问题（同样，在 Chrome 中）：

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