J'affiche sur une page de mon site la liste des épisodes pour chaque série.
Par contre, je ne sais pas comment séparer les saison.
Voici l'affichage que j'obtiens :
L'affichage que j'aimerais obtenir:
Ici mon code de la page :
Code : Tout sélectionner
<section class="series accueilContainer episodeSection col-10">
<article class="seriesRecord">
<!-- TITLE DISPLAY -->
<h1 class="episodesTitle epListTitle"><mark>EPISODES</mark></h1>
<h1 class="episodesTitle epListTitle"><mark><?php echo $titles['title']; ?><mark></h1>
<!-- EPISODES SECTION DISPLAY -->
<table class="episodeTable">
<?php foreach ($episodeList as $episodes) { ?>
<tr>
<td class="episodeCell episodeNumberCell"><p class="episodes"><?php echo $episodes['epNumber'] ?></p></td>
<td class="episodeCell episodeSeasonCell"><p class="episodes"><?php echo $episodes['seasonNumber']." x ".$episodes['seasonEpNumber'] ?></p></td>
<td class="episodeCell episodeOrigCell"><p class="episodes"><?php echo $episodes['episodeTitle']; ?></p></td>
<td class="episodeCell episodeFrenchCell"><p class="episodes"><?php echo $episodes['frenchEpisodeTitle']; ?></p></td>
</tr>
<?php } ?>
</table>
</article>
</section>
Code : Tout sélectionner
.episodeSection {
display: block;
position: relative;
background-image: url("../images/multi_123.jpg");
background-attachment: fixed;
height: 100vh;
overflow: hidden;
}
.episodesTitle {
text-align: center;
font-family: "Bookman Old Style";
font-size: 22px;
font-weight: 900;
line-height: 0.5em;
}
.epListTitle > mark {
background-color: yellow;
color: #ff00ff;
}
/* Episodes List Table */
.episodeTable {
position: relative;
top: 5em;
margin-left: auto;
margin-right: auto;
width: auto;
border: 8px groove #cccccc;
border-collapse: separate;
}
.episodeCell {
table-layout: auto;
vertical-align: middle;
line-height: 0.5em;
}
.episodeCell p {
font-family: "Courier";
font-size: 14px;
}
.episodeNumberCell {
border-right: 2px solid #666;
}
.episodeSeasonCell {
border-right: 2px solid #666;
}
.episodeOrigCell {
border-right: 2px solid #666;
}