CSS tableaux SquareSpace

Quartier général Support
#1

Salut la gang!

Pour ceux qui utilisent SquareSpace, vous avez peut-être remarqué qu’il n’y a pas la possibilité d’insérer des tableaux facilement, sauf en ajoutant un bloc de code -_-’

C’est ce que j’ai fait pour un article sur le site de mon chum.
Par contre, je m’y connais pas trop en CSS et sur mobile c’est pas top…

IMG_0022
IMG_0022750×1334 132 KB

Voici le lien de l’article en question: https://renovationleblanc.com/blog/combien-ca-coute-une-maison-neuve

Et le CSS que j’ai ajouté:

table.tableauxblog {
  font-family: 'proxima-nova', sans-serif;
  background-color: #FFFFFF;
  width: 700px;
  height: 200px;
  text-align: left;
    border-collapse: collapse;
}

  table.center {
    margin-left:auto; 
    margin-right:auto;
  }

table.tableauxblog td, table.tableauxblog th {
  border: 1px solid #AAAAAA;
  padding: 3px 6px;
}
table.tableauxblog tbody td {
  font-size: 16px;
}
table.tableauxblog tr:nth-child(even) {
  background: #F5EFDB;
}
table.tableauxblog thead {
  background: #F4C716;
  border-bottom: 2px solid #444444;
}
table.tableauxblog thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}
table.tableauxblog tfoot td {
  font-size: 14px;
}
table.tableauxblog tfoot .links {
  text-align: right;
}
table.tableauxblog tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

Quelqu’un connait le code que je dois ajouter pour que ça paraisse bien sur mobile? :open_mouth:

Merci tellement d’avance!

1 « J'aime »
#2

tu pourrais utiliser un code HTML et le placer dans un code block

    <style>
	/* info (hed, dek, source, credit) */
.rg-container {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 1em 0.5em;
  color: #222;
}
.rg-header {
  margin-bottom: 1em;
  text-align: left;
}

.rg-header > * {
  display: block;
}
.rg-hed {
  font-weight: bold;
  font-size: 1.4em;
}
.rg-dek {
  font-size: 1em;
}

.rg-source {
  margin: 0;
  font-size: 0.75em;
  text-align: right;
}
.rg-source .pre-colon {
  text-transform: uppercase;
}

.rg-source .post-colon {
  font-weight: bold;
}

/* table */
table.rg-table {
  width: 100%;
  margin-bottom: 0.5em;
  font-size: 1em;
  border-collapse: collapse;
  border-spacing: 0;
}
table.rg-table tr {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-align: left;
  color: #333;
}
table.rg-table thead {
  border-bottom: 3px solid #ddd;
}
table.rg-table tr {
  border-bottom: 1px solid #ddd;
  color: #222;
}
table.rg-table tr.highlight {
  background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
  background-color: #f6f6f6;
}
table.rg-table th {
  font-weight: bold;
  padding: 0.35em;
  font-size: 0.9em;
}
table.rg-table td {
  padding: 0.35em;
  font-size: 0.9em;
}
table.rg-table .highlight td {
  font-weight: bold;
}
table.rg-table th.number,
td.number {
  text-align: right;
}

/* media queries */
@media screen and (max-width: 600px) {
  .rg-container {
    max-width: 600px;
    margin: 0 auto;
  }
  table.rg-table {
    width: 100%;
  }
  table.rg-table tr.hide-mobile,
  table.rg-table th.hide-mobile,
  table.rg-table td.hide-mobile {
    display: none;
  }
  table.rg-table thead {
    display: none;
  }
  table.rg-table tbody {
    width: 100%;
  }
  table.rg-table tr,
  table.rg-table th,
  table.rg-table td {
    display: block;
    padding: 0;
  }
  table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
  }
  table.rg-table tr.highlight {
    background-color: inherit !important;
  }
  table.rg-table.zebra tr:nth-child(even) {
    background-color: transparent;
  }
  table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
  }
  table.rg-table tr:nth-child(even) {
    background-color: transparent;
  }
  table.rg-table td {
    padding: 0.5em 0 0.25em 0;
    border-bottom: 1px dotted #ccc;
    text-align: right;
  }
  table.rg-table td[data-title]:before {
    content: attr(data-title);
    font-weight: bold;
    display: inline-block;
    content: attr(data-title);
    float: left;
    margin-right: 0.5em;
    font-size: 0.95em;
  }
  table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
  }
  table.rg-table td:empty {
    display: none;
  }
  table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
  }
}

</style>
<div class='rg-container'>
	<table class='rg-table' summary=''>
		<caption class='rg-header'>
			<span class='rg-hed'></span>
			<span class='rg-dek'></span>
		</caption>
		<thead>
			<tr>
				<th class='text '>Quoi?</th>
				<th class='text '>Montant apprixomatif</th>
				<th class='text '>Commentaires</th>
			</tr>
		</thead>
		<tbody>
			
				<tr class=''>
					<td class='text ' data-title='Quoi?'>Achat du terrain</td>
					<td class='text ' data-title='Montant apprixomatif'>25-30% du prix total du projet</td>
					<td class='text ' data-title='Commentaires'></td>
				</tr>
			

				<tr class=' highlight'>
					<td class='text ' data-title='Quoi?'>Notaire</td>
					<td class='text ' data-title='Montant apprixomatif'>1200-1600$</td>
					<td class='text ' data-title='Commentaires'>Si vous achetez un terrain en premier et faites construire votre maison plus tard, demandez à la banque de mettre la valeur totale du projet estimée pour ne pas devoir payer le notaire 2x.</td>
				</tr>
			

				<tr class=''>
					<td class='text ' data-title='Quoi?'>Taxe de bienvenue/Droits de mutation</td>
					<td class='text ' data-title='Montant apprixomatif'>3750$ pour un projet de 300 000$</td>
					<td class='text ' data-title='Commentaires'>Vous trouverez un calculateur en ligne ici: http://www.taxedebienvenue.com/</td>
				</tr>
			

				<tr class=' highlight'>
					<td class='text ' data-title='Quoi?'>Plans</td>
					<td class='text ' data-title='Montant apprixomatif'>Technologue: 1500 à 3000$ Architecte: 6 000 à 12 000$</td>
					<td class='text ' data-title='Commentaires'>Attention aux modifications, elles peuvent coûter cher!</td>
				</tr>
			

				<tr class=''>
					<td class='text ' data-title='Quoi?'>Arpenteur</td>
					<td class='text ' data-title='Montant apprixomatif'>2 000 $</td>
					<td class='text ' data-title='Commentaires'>Inclus le certificat de localisation</td>
				</tr>
			

				<tr class='hide-mobile highlight'>
					<td class='text ' data-title='Quoi?'>Permis de construction de la ville</td>
					<td class='text ' data-title='Montant apprixomatif'>250 $ + un dépôt pour le temps de la construction (2000$)</td>
					<td class='text ' data-title='Commentaires'>Peut différer selon les municipalités</td>
				</tr>
			

				<tr class='hide-mobile'>
					<td class='text ' data-title='Quoi?'>Test pour l’étude du sol et de la qualité de l’eau</td>
					<td class='text ' data-title='Montant apprixomatif'>800 - 2000$</td>
					<td class='text ' data-title='Commentaires'>Si votre résidence n’est pas alimentée par l’aqueduc. Voir avec votre municipalité.</td>
				</tr>
			

				<tr class='hide-mobile highlight'>
					<td class='text ' data-title='Quoi?'>Puits (si le terrain n’est pas desservi par l’aqueduc)</td>
					<td class='text ' data-title='Montant apprixomatif'>20 000 $</td>
					<td class='text ' data-title='Commentaires'>Le prix va varier selon la profondeur du forage. Prévoir une analyse d’eau et possiblement un système de traitement des eaux. Le propriétaire a l’obligation de fournir une eau potable aux membres de sa famille, alors ne négligez surtout pas de faire analyser l‘eau pour vérifier si elle contient des contaminants.</td>
				</tr>
			

				<tr class='hide-mobile'>
					<td class='text ' data-title='Quoi?'>Fosse septique</td>
					<td class='text ' data-title='Montant apprixomatif'>7000 - 12 000$</td>
					<td class='text ' data-title='Commentaires'>Si le terrain n’est pas desservi par les égouts</td>
				</tr>
			

				<tr class='hide-mobile highlight'>
					<td class='text ' data-title='Quoi?'>Branchement à Hydro Québec</td>
					<td class='text ' data-title='Montant apprixomatif'>300 $</td>
					<td class='text ' data-title='Commentaires'>Si la maison est à moins de 100 pieds du raccord électrique.</td>
				</tr>
			

				<tr class='hide-mobile'>
					<td class='text ' data-title='Quoi?'>Installation de lumières par l’électricien</td>
					<td class='text ' data-title='Montant apprixomatif'>$ à l’heure</td>
					<td class='text ' data-title='Commentaires'>Vérifier dans la soumission si c’est inclus. Ce qu’on voit souvent: pose de 30 encastrés et le reste à vos frais.</td>
				</tr>
			

				<tr class='hide-mobile highlight'>
					<td class='text ' data-title='Quoi?'>Terrassement</td>
					<td class='text ' data-title='Montant apprixomatif'>5000 - infini</td>
					<td class='text ' data-title='Commentaires'>Par expérience, à 5000$ t'as pas grand chose.</td>
				</tr>
			

				<tr class='hide-mobile'>
					<td class='text ' data-title='Quoi?'>TPS & TVQ</td>
					<td class='text ' data-title='Montant apprixomatif'>Dans le cas d’une résidence neuve, il faut payer les taxes sur tous les matériaux et services.</td>
					<td class='text ' data-title='Commentaires'>Vous pouvez vous faire rembourser une partie des taxes payées: https://www.revenuquebec.ca/fr/services-en-ligne/formulaires-et-publications/details-courant/fp-2190.p/</td>
				</tr>
			

				<tr class='hide-mobile'>
					<td class='text ' data-title='Quoi?'></td>
				</tr>
			
		</tbody>
	</table>
	<div class='rg-source'>
		<span class='pre-colon'>SOURCE</span>: <span class='post-colon'>Sources</span>
	</div>
</div>

j’ai utilisé ce site pour créer le code HTML http://russellgoldenberg.github.io/responsive-table-generator/

1 « J'aime »
#3

Oh merci @Pascal_Cabana !
Moi j’avais utilisé : https://divtable.com/table-styler/

Est-ce que tu sais pourquoi il montre seulement 5 rangées sur mobile?
Peu importe le nombre que j’indique ici:

56
Capture d’écran 2019-03-18 à 07.42.56.png1690×678 56.4 KB

#4

malheureusement non…

#5

Bon c’est réglé!

Voici ce que ça donne, beaucoup mieux :grin:

IMG_292534CA96E5-1
IMG_292534CA96E5-1.jpeg750×1334 274 KB

Merci beaucoup Pascal !!!

1 « J'aime »
#6

Tu as fait quoi finalement, vraiment beaucoup mieux

#7

J’ai écris «show all» à la mitaine au lieu de choisir un nombre, je suis pas certaine que ça a rapport, un moment donné ça a juste fonctionné :open_mouth:

1 « J'aime »
#8

Ce sujet a été automatiquement fermé après 14 jours. Aucune réponse n’est permise dorénavant.