Joomla.it Forum
Joomla! 3 => Joomla! 3 => : squalogu 20 Sep 2015, 12:33:06
-
ciao, lo script in allegato genera una tabella, ma quando provo nello smartphone appare uno scroll, come faccio per renderlo responsive? mandando a capo ad esempio le varie colonne?
-
Ciao squalogu
qui trovi un po di soluzioni gratuite per tabelle responsive. La parte di CSS va integrata nel .CSS del tuo template
http://www.enough.pro/best-10-html-css-table-for-designers/
-
ciao, ho individuato questo che sembra andare bene, il fatto è che lo style mi crea degli errori con il calendario della richiesta disponibilità.. vorrei non interferisse con il calendario..
-
anche io uso spesso questa tabella, pero' non mi da problemi, il calendario e' un modulo a parte?
in caso prova a creare uno stile solo per la tabella in modo che non venga preso da tutte le table che trova nella pagina (se questo e' il problema che riscontri)
-
Per differenziare le 2 tabelle , si potrebbe creare una classe .tuaclasse
Nell'html al tag table devi aggiungere
<table class="tuaclasse">
poi nel CSS, dove hai gli stili della nuova tabella scaricata, va aggiunta, prima dei selettori tag, il nome della classe, lasciando o modificando a piacere lo stile delle righe, colonne, celle ecc
per esempio:
.tuaclasse tr,
.tuaclasse td,
.tuaclasse th {
....
...
}
Nb: lo stile iniziale della table, quello che gia' avevi nel CSS lo devi tenere per tutte le altre table che sono nella pagina e non hanno bisogno di questo stile, tipo il calendario.
-
ho provato così, ma niente
{
margin: 10;
padding: 10;
}
body {
font: 14px/1.4 Georgia, Serif;
}
#page-wrap {
margin: 10px;
}
p {
margin: 40px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
}
/* Zebra striping */
tr:nth-of-type(odd) {
}
.miaclasse th {
color: white;
font-weight: bold;
}
.miaclasse td, th {
padding: 4px;
text-align: left; }
<table class="miaclasse">
<tbody>
<tr>
<td>
<p>Un comodo materasso...</p>
<div>- TV 21''<>
<div>- Doccia Grucce<>
<div>- Wi-Fi<>
</td>
<td> [slideshow width="100%" height="SLIDESHOW_HEIGHT" align="left|right|none" caption="yes|no"]<br />[slider_item title="CAPTION_TITLE" src="images/foto_camere/standard.jpg" ]CAPTION_DESCRIPTION [/slider_item]<br />[slider_item title="CAPTION_TITLE" src="images/foto_camere/standard-bagno.jpg"]CAPTION_DESCRIPTION [/slider_item]<br />[/slideshow]</td>
</tr>
</tbody>
</table>
-
prova a vedere se ci sono altri selettori tag comuni, in caso differenzia anche quelli
-
la cosa strana è questa: ho cancellato le istruzioni css ho incollato il seguente codice html in un modulo personalizzato e in questa pagina ho risolto il problema che volevo risolvere cioè la tabella nell'articolo ora è responsive, ma va a disturbare un altra tabella che si trova in un altro modulo. in un altra pagina invece la stessa non viene disturbata.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Responsive Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !IE]><!-->
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.miatabella thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.miatabella tr { border: 1px solid #ccc; }
.mia tabella td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
.miatabella td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 70px;
white-space: nowrap;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
</style> <!--<![endif]-->
-
/* Hide table headers (but not display: none;, for accessibility) */ .miatabella thead tr { position: absolute; top: -9999px; left: -9999px; }
va corretta in
.miatabella thead, .miatabella tr { position: absolute; top: -9999px; left: -9999px; }
prova ad aggiungere
.miatabella table