简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment créer des bordures de colonnes de tableau
P粉055726146
P粉055726146 2023-09-11 09:31:44
0
1
534

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粉055726146
P粉055726146

répondre à tous(1)
P粉872101673
P粉8721016732023-09-12 00:46:05 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！