CSS tableaux SquareSpace

[Marie_Pierre]

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…

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?

Merci tellement d’avance!

[Pascal_Cabana]

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/

[Marie_Pierre]

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:

[Pascal_Cabana]

malheureusement non…

[Marie_Pierre]

Bon c’est réglé!

Voici ce que ça donne, beaucoup mieux

Merci beaucoup Pascal !!!

[Pascal_Cabana]

Tu as fait quoi finalement, vraiment beaucoup mieux

[Marie_Pierre]

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é