Tabella costruita con javascript...responsive

[albertok]

Se puoi postare la parte di script interessata, che crea la tabella con D3, potrei dargli uno sguardo appena possibile.

Allora:
così a occhio bisognerebbe creare 7 tabelle diverse (LUN. MART, MERC, GIOV, VEN SAB);
Per farlo il terzo d3.select andrebbe ripetuto 7 volte... a sto punto servirebbe un ciclo;
una volta create le sette tabelle bisogna riempirle coi dati, con un altro ciclo, applicare il metodo d3.csv con relativi if e split dei dati contenuti nel file .csv originale;


comunque ecco il codice javascript / D3:

/* inserimento titolo h2 e paragrafo */
d3.select("body")
    .append("h2")
    .text("Palinsesto programmi 2021")
d3.select("body")
    .append("p")
    .text("Qui trovate la nostra programmazione settimanale: cliccate sul nome del proogramma per aprire la pagina relativa")

/* inserimento dell'intestazion della tabella con le relative etichette */
d3.select("body")
    .append("table")
    .append("thead")
    .append("tr")
    .selectAll("th")
    .data(["dalle", "alle", "LUNEDI", "dalle", "alle", "MARTEDI", "dalle", "alle","MERCOLEDI", 
           "dalle", "alle", "GIOVEDI", "dalle", "alle", "VENERDI", "dalle", "alle", "SABATO", 
           "dalle", "alle", "DOMENICA"
    ])
    .enter()
    .append("th")
    .text(function (d) { return d });

d3.select("table")
    .append("tbody")
    .enter();

/*divisione di ogni dato array in 3 parti ProgrammaNome, ProgrammaUrl e datoClasse */
d3.csv("Palinsesto.csv", function (datiCaricati) {
    console.log(datiCaricati);
    var d = datiCaricati;
    d3.select("tbody")
        .append("tr")
        .selectAll("td")
        .data([d.dalle, d.alle, d.LUNEDI, d.dalle, d.alle, d.MARTEDI, d.dalle, d.alle, d.MERCOLEDI, 
               d.dalle, d.alle, d.GIOVEDI, d.dalle, d.alle, d.VENERDI, d.dalle, d.alle, d.SABATO, 
               d.dalle, d.alle, d.DOMENICA])
        .enter()
        .append("td")
        .attr("class",function(d){
            const [Pippo, Pluto, Topolino] = d.split("|");    
            return Topolino;
            })
        .html(function (cella) {
                const [ProgrammaNome, ProgrammaUrl, classeCella] = cella.split("|");
                /* se la cella ha il valore dell'url, inserisco un link */
                if (ProgrammaUrl) {
                   return "<a href='" + ProgrammaUrl + "' target='blank' \">" + ProgrammaNome + "</a>"
                }
                /* altrimenti mostro un testo normale */
                /*Se non ci fosse le colonne "dalle" e "alle" non verrebbero visualizzate */
                else {
                    return ProgrammaNome
                }
              }
             )
    
});

Grazie
Comunque... l'elaborato così com'è va già bene... ma se riuscissi a cavarmi sto sfizio del responsive sarebbe carino :-)

[albertok]

p.s.

ah mi sono accorto che non ho scritto nulla del file origine dei dati: il file .csv
è strutturato in modo che ogni singolo dato sia:

NomeProgramma|UrlProgramma|datoClasseN

dato ClasseN mi serve per assegnare a ciascun td una clase diversa in modo da potergli assegnare un diverso sfondo.

dalle,alle,LUNEDI,MARTEDI,MERCOLEDI,GIOVEDI,VENERDI,SABATO,DOMENICA
08:00,09:00,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01
09:00,10:00,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02
...