表格边框的问题

Question

我的 table 有奇怪的问题，像往常一样，我希望我的 Table 头部和 Table 单元格周围有边框，但出于某种原因，它只给我一个围绕整个 table 的边界。我该如何解决这个问题？

附上图片和代码

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;

}

Answer 1

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

Answer 2

您在问题中发布的代码确实不仅在整个 table 周围设置了边框，而且还在每个 td 和 [=13] 周围设置了边框=].

我想您可能不希望单元格具有单独的边框。在这种情况下，您应该仅将边框应用于 td 和 th（即单元格），另外将 border-collapse: collapse; 应用于 table 本身：

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>

Answer 3

解决这个问题的最佳方法是小心使用哪个 CSS 选择器，而不是将 table 选择器作为一个整体使用。有关简单 table 值和备选方案的帮助，请查看 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; }

表格边框的问题

Problems with tables borders

html

css

html-table