Je cherche à positionner plusieurs tableaux à la suite.
Le premier lit bien le CSS ( width: 100% ) alors que le second déborde complètement de la page.
Voici le résultat en image :
Et le code :
<style type="text/css">
<!--
table {
width: 100%;
vertical-align: top;
}
#table-section-identity td {
width: 50%;
}
#table-section-identity .label {
width: 30%;
text-align: right;
color: #aaaaaa;
vertical-align: top;
}
#table-identity-left {
width: 100%;
}
#section-title {
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 2px solid #2981e4;
font-size: 1.2em;
font-weight: bold;
}
-->
</style>
<page>
<table id="table-section-identity">
<tr>
<td>
<table id="table-identity-left">
<tr>
<td class="label">prénom</td>
<td id="firstname" class="value">Prénom</td>
</tr>
<tr>
<td class="label">nom</td>
<td id="lastname" class="value">Nom</td>
</tr>
<tr>
<td class="label">adresse</td>
<td class="value">
<div id="street">000 rue Adresse</div>
<span id="zipcode">00000</span> <span id="city">Ville</span>
</td>
</tr>
<tr>
<td class="label">email</td>
<td id="email" class="value">mail@domain.com</td>
</tr>
<tr>
<td class="label">téléphone</td>
<td id="phone" class="value">0500000000</td>
</tr>
</table>
</td>
<td>
<table id="table-identity-left">
<tr>
<td class="label">années</td>
<td id="yoga" class="value">12</td>
</tr>
<tr>
<td class="label">activité physique</td>
<td id="activity" class="value">Sport</td>
</tr>
<tr>
<td class="label">informations complémentaires</td>
<td id="stuff" class="value">Complément d'informations destinées à générer un retour à la ligne.</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="table-section-sessions">
<tr>
<td >
<div>Jeudi de 9h30 à 11h30</div>
<div>Nom de l'association</div>
</td>
<td>
<div>Centre d'animations de l'association</div>
<div>11, rue du centre</div>
<div>00000 Ville</div>
</td>
</tr>
</table>
</page>Une idée pour que je sorte de ce mauvais pas ?
Merci !