简体中文（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 天前537

全部回复(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
  • 取消回复