recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment créer des bordures de colonnes de tableau

Voici mon code

table {
            border: 1px solid;
            width: 20.5%;
            
        }
<table >
        <tr>
            <th align = "left">Ann-Maree Smith </th>
            <th align = "left">Mitz Perez</th>
        </tr>
        <tr>
            <td>Bld 40:133, Wollongong</br>Campus </td>
            <td>Bld 4:105, Wollongong</br>Campus</td>
        </tr>
        <tr>
            <td>(02) 4221 4714 </td>
            <td>(02) 4221 3833 </td>
        </tr>
        <tr>
            <td>Mon-Fri</td>
            <td>Mon-Fri</td>
        </tr>
        <tr>
            <td>ams@uow.edu.au</td>
            <td>mperez@uow.edu.au</td>
        </tr>
    </table>

J'essaie d'obtenir cet effet [1] : https://i.stack.imgur.com/qnBdQ.png Cependant, mon tableau n'a qu'une seule bordure, il manque les "bordures de colonnes", au lieu des doubles bordures vues sur l'image. J'aimerais connaître la meilleure façon d'obtenir l'effet souhaité.

P粉055726146P粉055726146518 Il y a quelques jours596

répondre à tous(1)je répondrai

  • P粉872101673

    P粉8721016732023-09-12 00:46:05

    Vous devez modifier la structure du tableau car vous souhaitez essentiellement avoir une bordure solide autour des cellules du tableau, puis une bordure solide autour de l'ensemble du tableau, sinon vous obtiendrez des cases dans les coins. 

    <head>
<style>
table {
    border: 1px solid;
    width: 20.5%
  }

tr > td {
    border: 1px solid;
}

tr > td > span.name {
    font-weight: bold;
}

tr > td > span {
    display: block;
}
</style>
</head>
<body>
     <table >
        <tr>
        <td>
            <span class="name">Ann-Maree Smith</span>
            <span>Bld 40:133, Wollongong</br>Campus</span>
            <span>(02) 4221 4714 </span>
            <span>Mon-Fri</span>
            <span>ams@uow.edu.au</span>
        </td>
        <td>
            <span class="name">Mitz Perez</span>
            <span>Bld 4:105, Wollongong</br>Campus</span>
            <span>(02) 4221 3833 </span>
            <span>Mon-Fri</span>
            <span>mperez@uow.edu.au</span>
        </td>
        </tr>
    </table>
</body>

    répondre
    0
  • Annulerrépondre