Publish spreadsheet to the web without page break

0
votes

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.

Link to publish:
https://docs.google.com/spreadsheets/d/e/2PACX-1vSzwPcpp6uIUaBhGa2r5R9wF577ULb2g0UCfndR0qJ2LzByOktmn-nubxNNhuW1i7NIsAqZ1jQjLl7f/pubhtml?gid=198805037&single=true

3
htmlcssgoogle-apps-scriptgoogle-sheets

3 Answers

3
votes

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

2
votes

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.

-1
votes

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="Telegram Mattos Xperiences" 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="https://mattosxperiences.com.br">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;
}

After that, just publish via web app deployment and the result will be something like this:

https://script.google.com/macros/s/AKfycbz2Q42n872sFWL0Rkf-ntFFW7jb86YBIDhNRR6qy0OQLykK7YY/exec

enter image description here