保留空白

Question

我想保留空白以保持每列正确对齐。 但是侧边栏会自动删除任何多余的空间，有人可以给我一些建议吗？

Google Sidebar

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 Script HTML 服务创建的，这意味着它们使用 html，这就是为什么 Serge 包含指向 question 的链接，以了解   的使用。另一种选择是将文本行括在<pre> 标签上。

以下是构建 html 输出以在堆栈 sn-p 上工作的代码的改编。

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 文件中，设置显示：

#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 仅显示布局。