WebSite X5Help Center

 
Francesco Q.
Francesco Q.
User

Tabelle Responsive  it

Auteur : Francesco Q.
Visité 2611, Followers 3, Partagé 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.

Posté le
15 RéPONSES - 8 UTILE - 1 CORRECT
Tommaso Tarallo
Tommaso Tarallo
User

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

Lire plus
Posté le de 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...

Lire plus
Posté le de Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

che codice ci consigli?

Lire plus
Posté le de Tommaso Tarallo
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
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

.

Lire plus
Posté le de  ‪ 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>

Lire plus
Posté le de Tommaso Tarallo
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

Confermo ...

io utilizzo quello postato da KolAsim qui

https://helpcenter.websitex5.com/fr/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

Lire plus
Posté le de 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

Lire plus
Posté le de Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

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

Lire plus
Posté le de 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>

Lire plus
Posté le de 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

Lire plus
Posté le de A. Kris
Tommaso Tarallo
Tommaso Tarallo
User

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

Lire plus
Posté le de Tommaso Tarallo