如何缩小Google Apps Script网页边距以横向显示更多Datatable数据

调整页面全局边距 #

找到部署脚本对应的HTML代码部分，修改全局样式缩小边距：

body {
  margin: 8px 1%; /* 替换默认大边距，将左右边距设为1% */
  padding: 0;
}
/* 若有包裹表格的容器，同步调整 */
.table-container {
  width: 99%;
  margin: 0 auto;
}

优化Nota列布局减少纵向滚动 #

针对Nota列的大量数据，通过Datatable配置实现自动换行+合理宽度分配，同时开启横向滚动避免内容挤压：

// 初始化Datatable时添加以下配置
$(document).ready(function() {
  $('#your-datatable-id').DataTable({
    scrollX: true, // 开启横向滚动适配窄屏
    columnDefs: [
      {
        targets: [4], // 替换为Nota列的索引（从0开始计数）
        width: '35%', // 给Nota列分配合理宽度比例
        render: function(data) {
          // 给内容添加自动换行样式
          return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + data + '</div>';
        }
      }
    ]
  });
});

容器宽度适配 #

确保表格的父容器充分利用页面宽度：

.table-container {
  overflow-x: auto; /* 窄屏时自动显示横向滚动条 */
  width: 100%;
}

注意事项 #

1. 若通过Google Apps Script动态生成HTML，需在HtmlService.createHtmlOutput()的内容中插入上述CSS和JS代码
2. 列索引需根据实际表格列顺序调整，比如Nota列是第5列就填[4]
3. 可根据实际数据量微调宽度比例和边距数值

内容的提问来源于stack exchange，提问作者Sharon Ferera