简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

建立表格列邊框的方法

以下是我的程式碼

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>

我正在嘗試實現這個效果 [1]: https://i.stack.imgur.com/qnBdQ.png 然而，我的表格只有一個邊框，缺少“列邊框”，而不是圖片中看到的雙邊框。我想知道如何實現我想要的效果的最佳方法。

P粉055726146P粉055726146427 天前539

全部回覆(1)我來回復

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

    回覆
    0
  • 取消回覆