Question

我想保留空白区域以保持每列正确对齐。但侧栏自动删除任何额外的空间，有人可以给我一些建议。

function Test1() {

var lineBrk = "<br />"
var aValues = "```"+lineBrk+
"BLB001| APPLE | O/B   |   100.00"+lineBrk+
"AG010 | ORANGE| O/B   |   125.25"+lineBrk+
"B123  | KIWI  | O/B   |    95.00"+lineBrk+
"```"

 // Display a modal dialog box with custom HtmlService content.
 var htmlOutput = HtmlService
     .createHtmlOutput(aValues);

 SpreadsheetApp.getUi().showSidebar(htmlOutput);

}

Answer 1

侧边栏是使用Google Apps脚本HTML服务创建的，这意味着他们使用html，这就是为什么Serge包含question关于 使用的链接的原因。另一种方法是将文本行括在<pre>标记上。

下面是对代码的改编，它构建了html输出以处理堆栈片段。

var lineBrk = "</pre><br />"
var aValues = 
"<pre>BLB001| APPLE | O/B   |   100.00"+lineBrk+
"<pre>AG010 | ORANGE| O/B   |   125.25"+lineBrk+
"<pre>B123  | KIWI  | O/B   |    95.00"+lineBrk;

document.write(aValues);

Answer 2

如果您希望显示明文，Ruben上面的回答就可以了。如果您想要某种格式，使用简单的HTML布局样式会有所帮助。

您可以将表示例解释为以下HTML：

<div id="table">
  <div class="row">
    <div class="col">BLB001</div>
    <div class="col">Apple</div>
    <div class="col">0/B</div>
    <div class="col">100.00</div>
  </div>
  <div class="row">
    <div class="col">AG010</div>
    <div class="col">Orange</div>
    <div class="col">0/B</div>
    <div class="col">125.25</div>
  </div>
  <div class="row">
    <div class="col">B123</div>
    <div class="col">Kiwi</div>
    <div class="col">0/B</div>
    <div class="col">95.00</div>
  </div>
</div>

然后，在style标记或链接的CSS文件中，设置display：

#table { 
  display: table; 
  table-layout:fixed; 
  width: 300px;  /* This could be any width you'd like */
  font-family:monospace;
}
.row { display: table-row; }
.col { display: table-cell; }

如果需要，您还可以设置边框。使用此方法的好处是，如果数据是可变的，您可以使用应用程序脚本循环填充任意数量的行或单元格。

Here's a very simple CodePen demo仅显示布局。

保留白色空间

2 个答案: