css 表边框的问题

kxkpmulp  于 2023-04-08  发布在  其他
关注(0)|答案(3)|浏览(104)

我有wierd问题与我的表,作为正常我希望边界周围我的表头和表格单元格,但由于某种原因,它只给我一个边界周围的整个表.我如何解决这个问题?
随附图像和代码
How it looks
HTML;

<table width='100%'>
                    <tr>
                        <th>Maandag</th>
                        <th>Dinsdag</th>
                        <th>Woensdag</th>
                        <th>Donderdag</th>
                        <th>Vrijdag</th>
                        <th>Zaterdag</th>
                        <th>Zondag</th>
                    </tr>

                    <tr>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                        <td>#</td>
                    </tr>
                </table>

CSS;

table, th, td {
background-color: white;
border: solid black 3px;

}

ojsjcaue

ojsjcaue1#

您在问题中发布的代码 * 确实 * 不仅在整个表周围放置了边框,而且还在每个tdth周围放置了边框。
我想你可能不希望单元格有单独的边框。在这种情况下,你应该只将边框应用于tdth(即单元格),并将border-collapse: collapse;应用于表格本身:

table {
  border-collapse: collapse;
}

th,
td {
  background-color: white;
  border: solid black 3px;
}
<table width='100%'>
  <tr>
    <th>Maandag</th>
    <th>Dinsdag</th>
    <th>Woensdag</th>
    <th>Donderdag</th>
    <th>Vrijdag</th>
    <th>Zaterdag</th>
    <th>Zondag</th>
  </tr>

  <tr>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
  </tr>
</table>
wpx232ag

wpx232ag2#

最好的方法是小心你使用的CSS选择器,而不是把表选择器作为一个整体来使用。关于简单的表值和替代方案的帮助,请访问https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content。

thead { background-color: white; border: solid black 3px; }
     th{ background-color: white; border: solid black 3px; }
     td{ background-color: white; border: solid black 3px; }
bwitn5fc

bwitn5fc3#

@remi03你可以试试这些代码原始:但你必须得放弃。

.baslik th{
  border: solid maroon 2px;
  padding: 0;
}
.icerik td{
  border: solid dodgerblue 2px;
  padding: 0;
}

<table width='100%'>
  <tr class="baslik">
    <th>Maandag</th>
    <th>Dinsdag</th>
    <th>Woensdag</th>
    <th>Donderdag</th>
    <th>Vrijdag</th>
    <th>Zaterdag</th>
    <th>Zondag</th>
  </tr>

  <tr class="icerik">
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
    <td>#</td>
  </tr>
</table>

相关问题