'Publish spreadsheet to the web without page break

On the computer when accessing the published spreadsheet, it appears complete, showing all columns.

However, when trying to access by cell phone, the page is completely broken and does not give complete visibility of the data.

I would like to know if there is any way to publish on the web but that all data appears on the cell phone without the need to move around the screen to look at all the data on the same line. The publishing version of the spreadsheet has no option to zoom out.

As I want to share the data for free, creating a website for that becomes unviable because I would have to spend money to be able to maintain the same.

I even researched about creating a web app using the google app script that delivered the table on its home page, which I can share openly, but I confess I couldn't create it.

If there is a model that I could use and if it solved the problem of not zooming in on the page and cutting the data, it would also help me.

htmlcssgoogle-apps-scriptgoogle-sheets


Solution 1:[1]

The best way I found to do this is using a Web App, from Google App Script, let's take the example:

First, we create an HTML script file in Google App Script:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <head>
  <style>
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }

  tr:nth-child(even) {
    background-color: #dddddd;
  }
  </style>
  </head>
  <body>
    <h1 style="background-color:powderblue;text-align:center;">Jogos na TV</h1>
    <h2 style="font-family:tempus sans itc;"><a href="https://t.me/mattosxperiences">CANAL NO TELEGRAM</a> <img border="0" alt="" src="https://logodownload.org/wp-content/uploads/2017/11/telegram-logo.png" width="25" height="25"> </h2>
    <h1></h1>
    <h2 style="font-family:tempus sans itc;"><a href="">SITE OFICIAL</a> <img border="0" alt="Site Mattos Xperiences" src="https://mattosxperiences.com.br/favicon-32.png" width="25" height="25"> </h2>
    <h1></h1>
    <table border="1" cellpadding="5px" >
    <?var tableData = getSheetData();?>
    <?for(var i = 0; i < tableData.length; i++) { ?>
      <?if(i == 0) { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <th><?= tableData[i][j] ?></th>
        <? } ?>
        </tr>
      <? } else { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td><?= tableData[i][j] ?></td>
        <? } ?>
        </tr>
      <? } ?>
    <? } ?>
    </table>
  </body>
</html>

The second step is to create a common script file and define the data search and activate the HTML file:

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('HTML Pagina da Web');
  return htmlOutput.evaluate();
}

function getSheetData()  { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Web App'); 
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();  
  return dataValues;
}

Solution 2:[2]

Instead of using the publish to the web featue you might use

  • AppSheet
  • Google Apps Script
  • Add-ons

AppsSheet is service that recently was included in the "Google Workspace Editors" family, that help users to create no-code web apps that could be integrated with a Google spreadsheet.

Google Apps Script is a service that has being part of the family for years to use scripting to extend some Google Sheets and other apps.

Add-ons are "mini-apps" that extends Google Sheets and other Google apps.

If you go for using Google Apps Script you might consider to checkout the SheetConverter library

Resources

Solution 3:[3]

You can't make a web published Spreadsheet responsive as it can have "n" number of columns that would potentially overflow the screen. However, there are some workarounds that could help you visualize it better:

  1. Embbed the Spreadsheet in a website rather than publishing it as a website. To do so check the section Embed Files from this guide.

  2. Change your default mobile browser to be in Desktop Site mode.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Mateo Randwolf

Related Questions