Tabelle Responsive
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
infatti questo problema era già stato segnalato: attendiamo risposta dallo staff.
Dovrebbero permettere di scegliere o percentuale o pixel.
http://sitiwebapp.16mb.com/dance/pagina-16.php
con un po di codice però si possono sistemare....
http://quellidelcucuzzolo.altervista.org/demo/tabella-responsive-wsx5/pricing-table.php
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...
che codice ci consigli?
... 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
.
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>
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...
provato ora anche io qui:
http://www.mirboprova.altervista.org/@beta_14-2/pagina-16.html
e direi che funzia ancora.....ciaoooo
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
Come si può risolvere per far andare a capo la parola completa invece di tagliarla?
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>
http://sitiwebapp.16mb.com/dance/pagina-16.php
Prego, Kris: grazie all'input dei moderatori, poi ho unito e perfezionato il codice.