suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So erstellen Sie Tabellenspaltenränder

Das Folgende ist mein 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>

Ich versuche, diesen Effekt zu erzielen [1]: https://i.stack.imgur.com/qnBdQ.png Allerdings hat meine Tabelle nur einen Rand, dem die „Spaltenränder“ fehlen, anstelle der im Bild gezeigten doppelten Ränder. Ich würde gerne wissen, wie ich den gewünschten Effekt am besten erzielen kann.

P粉055726146P粉055726146448 Tage vor553

Antworte allen(1)Ich werde antworten

  • P粉872101673

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

    你需要改变表格的结构，因为你基本上想要在表格单元格周围有一个实线边框，然后在整个表格周围有一个实线边框，否则你会在角落处得到方框。

    <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>

    Antwort
    0
  • StornierenAntwort