cari

Rumah  >  Soal Jawab  >  teks badan

Cara membuat sempadan lajur jadual

Berikut ialah kod saya

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>

Saya cuba mencapai kesan ini [1]: https://i.stack.imgur.com/qnBdQ.png Walau bagaimanapun, jadual saya hanya mempunyai satu sempadan, tiada "sempadan lajur", bukannya sempadan berganda yang dilihat dalam gambar. Saya ingin tahu cara terbaik untuk mencapai kesan yang saya inginkan.

P粉055726146P粉055726146448 hari yang lalu554

membalas semua(1)saya akan balas

  • P粉872101673

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

    Anda perlu menukar struktur jadual kerana anda pada asasnya ingin mempunyai sempadan pepejal di sekeliling sel meja dan kemudian sempadan pepejal di sekeliling keseluruhan meja, jika tidak, anda akan mendapat kotak di sudut. 

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

    balas
    0
  • Batalbalas