WebSite X5Help Center

 
Francesco Q.
Francesco Q.
User

Tabelle Responsive  it

Autore: Francesco Q.
Visite 2682, Followers 3, Condiviso 0  

Buonasera,

Mi chiedevo come mai la tabella presente nel drag and drop sia di default con una percentuale fissa e non variabile.

Solitamente si da una percentuale che si gestisce automaticamente riducendo la propria dimensione.

Postato il
15 RISPOSTE - 8 UTILI - 1 CORRETTO
Tommaso Tarallo
Tommaso Tarallo
User

infatti questo problema era già stato segnalato: attendiamo risposta dallo staff.

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

lo so Mirko, ma sarebbe utile da programma così da non perdere tempo ogni volta...

ma usando un codice css con important, come  si comporta il testo contenuto nella tabella?

sarebbe meglio che ci fosse una interruzione di riga settabile così da mandare a capo le colonne in eccesso...

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

che codice ci consigli?

Leggi di più
Postato il da Tommaso Tarallo
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Francesco Q.
Buonasera, Mi chiedevo come mai la tabella presente nel drag and drop sia di default con una percentuale fissa e non variabile. Solitamente si da una percentuale che si gestisce automaticamente riducendo la propria dimensione.

 ... purtroppo non ho il programma per verificare, ...ma! ...mi chiedo io e potrebbe nel caso confermare anche Mirko, ...la tabella non potrebbe essere per caso regolata per i vari breakpoint...?...

... se è sì, allora problema risolto...

... se è no! ... allora prova con quanto suggerito > qui ... e/o  > qua ...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Tommaso Tarallo
Tommaso Tarallo
User

se usciamo il codice di quelli del cucuzzolo per un'altra tabella, come lo modficihiamo facilmente?

<!--
=========================================================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
=========================================================================================
-->
<style>
/* stili tabella */
div[id^='catalogo_'] + div + div table {
border-collapse:separate !important;
border-spacing: 0 10px;
}
div[id^='catalogo_'] + div + div tr td:first-child > div {
transform: rotate(270deg);
}
div[id^='catalogo_'] + div + div tr td:nth-child(n+3):nth-child(-n+5) {
background: url('img/divider.png') right 16px no-repeat;
}
div[id^='catalogo_'] + div + div tr td:last-child a {
color: #fff !important;
text-decoration: none !important;
}

/* effetto hover */
div[id^='catalogo_'] + div + div tr td {
transition: all 0.5s ease;
}
div[id^='catalogo_'] + div + div tr:hover td:first-child,
div[id^='catalogo_'] + div + div tr:hover td:nth-child(n+3):nth-child(-n+6) {
background-color: #2d2d2d !important;
transition: all 0.5s ease;
}

div[id^='catalogo_'] + div + div tr:hover td:last-child,
div[id^='catalogo_'] + div + div tr:hover td:nth-child(2) {
background-color: #ff9408 !important;
transition: all 0.5s ease;
}

div[id^='catalogo_'] + div + div tr:hover td span {
color: #fff !important;
}

/* link esteso su una cella */
div[id^='catalogo_'] + div + div tr td:last-child {
cursor: pointer;
}

/* tabella responsive */
@media screen and (max-width:959px) {
div[id^='catalogo_'] + div + div > div {
overflow-x: auto !important;
}
div[id^='catalogo_'] + div + div table {
width: auto !important;
}
}

@media screen and (max-width:719px) {
div[id^='catalogo_'] + div + div table {
width: 100% !important;
}
div[id^='catalogo_'] + div + div tr {
display: table;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
div[id^='catalogo_'] + div + div tr td {
display: table-row;
width: 100%;
}
div[id^='catalogo_'] + div + div tr td > div {
display: table-cell;
vertical-align: middle;
}
/* stili tabella */
div[id^='catalogo_'] + div + div table {
border-collapse:collapse !important;
}
div[id^='catalogo_'] + div + div tr td:nth-child(n+3):nth-child(-n+5) {
background: url('');
border-bottom: 1px solid #ccc !important;
}
div[id^='catalogo_'] + div + div tr td:first-child > div {
transform: none;
}
}
</style>

<script>
$(document).ready(function() {
// tabella responsive + stili tabella
$("div[id^='catalogo_'] + div + div tr td").wrapInner('<div></div>');
// link esteso su una cella
$("div[id^='catalogo_'] + div + div tr td:last-child a").each(function() {
var link = $(this).attr('onclick');
$(this).parents('td').attr('onclick', link);
$(this).removeAttr('onclick');
});
});
</script>

Leggi di più
Postato il da Tommaso Tarallo
Claudio D.
Claudio D.
Moderator
Utente del mese IT

Confermo ...

io utilizzo quello postato da KolAsim qui

https://helpcenter.websitex5.com/it/post/178276#comment5

e mi trovo benissimo...

Il codice di "quelli del cucuzzolo" , da quello che ho capito funziona per casi particolari e fa diventare la tabella orizzontale verticale , spezzandola ... e per la sua modifica @SitiWeb, dovresti chiedere a loro... , anche se non ho capito cosa ci vuoi fare ..

Invece quello di KolAsim la rende elastica, e per i miei bisogni è decisamente più pratica ed immediata... wink

Leggi di più
Postato il da Claudio D.
Tommaso Tarallo
Tommaso Tarallo
User

ok grazie moderatori, ho provato anche io. Questo è il codice da mettere Prima della Chiusura del tag Head:

<style> table {word-break: break-all;}
#imTableObject_36_02 {overflow-x: hidden !important;}</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

da modificare l'id della tabella (nel mio caso 36_02)

Però in responsive vengono tranciate le parole...

http://sitiwebapp.16mb.com/dance/pagina-16.php

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

Come si può risolvere per far andare a capo la parola completa invece di tagliarla?

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

Ecco il codice giusto:

<style> table {word-wrap: break-all;}
#imTableObject_36_02 {overflow-x: hidden !important;}</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Leggi di più
Postato il da Tommaso Tarallo
A. Kris
A. Kris
User
SitiWeb App
Ecco il codice giusto: <style> table {word-wrap: break-all;} #imTableObject_36_02 {overflow-x: hidden !important;}</style> <script> $( document ).ready(function() { $("table").css("width", "");}); </script>
Grazie del codice Sitiweb sealed

Leggi di più
Postato il da A. Kris
Tommaso Tarallo
Tommaso Tarallo
User

Prego, Kris: grazie all'input dei moderatori, poi ho unito e perfezionato il codice.

Leggi di più
Postato il da Tommaso Tarallo