table

by toubia95

HTML

<h3>Nouvelle demande de séminaire ATILF</h3>
<p>
    <br>
    Une nouvelle demande d'organisation de séminaire vient d'être proposée.<br>
Pour valider la demande, cliquez <a href="#">ici</a>.
<br><br>
Détail de la demande :
    <br>
</p>
<table><tbody>
<tr><th colspan="2">Informations sur le porteur de l’invitation</th></tr>
    <tr><th>Nom/Prénom</th>
      <td>-</td></tr>
    <tr><th>Axe principal de rattachement</th>
      <td>-</td></tr>
<tr><th colspan="2">Informations sur l’intervenant</th></tr>
    <tr><th>Nom/Prénom</th>
      <td>-</td></tr>
    <tr><th>Adresse mail</th>
      <td>-</td></tr>
    <tr><th>Nom et adresse de l’organisme d’appartenance</th>
      <td>-</td></tr>
    <tr><th>Date/heure du séminaire ou période envisagée</th>
      <td>-</td></tr>
    <tr><th>Visio ou Présentiel</th>
      <td>-</td></tr>
    <tr><th>Titre et résumé du séminaire<br>(limité à X caractères pour le résumé –<br>info sera donnée par Delphine)</th>
      <td>-</td></tr>
    <tr><th>Mots clés du résumé</th>
      <td>-</td></tr>
    <tr><th>Autorisation droit à l’image</th>
      <td>OUI/NON + url form</td></tr>
<tr><th colspan="2">Informations budgétaires</th></tr>
    <tr><th>Frais demandés par l’intervenant</th>
      <td>Transport<br>
      Hébergement<br>
      Repas<br>
      Aucun</td></tr>
    <tr><th>Frais demandés par le porteur de l’invitation</th>
      <td>Restaurant<br>
      Plateaux repas<br>
      Aucun</td></tr>
</tbody></table>   
<p>
<br>
</p>
<div id="footer">
    ------------- ATILF -------------<br>
</div>    
<br><div class="moz-text-plain" wrap=true graphical-quote=true style="font-family: -moz-fixed; font-size: 12px;" lang="x-unicode"><pre wrap class="moz-quote-pre">
Merci de ne pas répondre à ce message, car votre réponse ne sera pas lue.
Please do not respond to this message, as your response will not be read.</pre></div>

CSS

body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 20px;
    background-color: #EEEEEE;
    color: #000000;
}
h3 {
    color: #CC6600;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px dotted;
    text-align: left;
    width: 90%;
    padding-bottom: 5px;
}
table {
    border-collapse: collapse;
    border: 1px solid #CC6600;
    padding: 10px;
    text-align: left;
    width: 100%;
    max-width: 800px;
}
th,td {
    background-color: #FFDDBB;
    border: 1px solid #CC6600;
    color: #CC6600;
    padding: 5px;
    vertical-align: top;
}
th[colspan="2"] {
    text-align: center;
    background-color: #CC6600;
    color: #FFFFFF;
}
td {
    background-color: #fff;
    color: #000000;
}
#footer {
    font-weight: bold;
    color: #CC6600;
    font-family: Courier, monospace;
}

@media only screen and (max-width: 576px) {
   td,th {
     display: block;
     box-sizing: border-box;
     clear: both;
     border: none;
     border-bottom: 1px solid #CC6600;
   }
}