web-dev-qa-db-fra.com

Bordure HTML uniquement en dehors du tableau

Comment puis-je mettre une bordure uniquement autour de ma table externe? Je n'ai pas besoin de tous les <tr> mais juste autour. J'ai essayé d'utiliser css mais dans un article Joomla ce n'est pas facile. Merci pour l'aide.

 <table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;">
      <tbody>
        <tr>
          <td>aasda</td>
          <td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
          <td width="60%">asfasfasfasf</td>
          <td>blabla</td>
        </tr>
        <tr>
          <td>saf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td width='"70%'>asf</td>
          <td rowspan="9" width="30%">
            <p>blabla</p>
            <p>blalbalbalalb</p>
          </td>
        </tr>
        <tr>
          <td>asf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td>asf</td>
        </tr>
        <tr>
          <td>asf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td width='"70%'>asf</td>
        </tr>
      </tbody>
    </table>
htmlcssjoomla3.0
8
Alberto32

Vous devez ajouter la propriété border:1px solid red à votre table

<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">
  <tbody>
    <tr>
      <td>aasda</td>
      <td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
      <td width="60%">asfasfasfasf</td>
      <td>blabla</td>
    </tr>
    <tr>
      <td>saf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td width='"70%'>asf</td>
      <td rowspan="9" width="30%">
        <p>blabla</p>
        <p>blalbalbalalb</p>
      </td>
    </tr>
    <tr>
      <td>asf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td>asf</td>
    </tr>
    <tr>
      <td>asf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td width='"70%'>asf</td>
    </tr>
  </tbody>
</table>
<p></p>
13
Rémy Testa

Table avec bordure extérieure

table {
  border: 1px solid black;
  border-collapse: collapse;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Table avec bordure extérieure et en rangées

table, tr {
  border: 1px solid black;
  border-collapse: collapse;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Pourrait continuer et créer pour tous les cas, mais vous obtenez le point.

En CSS, nous spécifions ce que nous voulons avoir une bordure.

Nous pouvons l'appliquer à zéro ou plusieurs des éléments suivants, selon ce à quoi nous voulons que le résultat final ressemble

  • <table> (table)
  • <tr> (ligne du tableau)
  • <td> (données du tableau)
  • <th> (en-tête du tableau)
1
Tiago Martins Peres 李大仁