表格边框问题答案

【问题标题】：Problems with tables borders表格边框问题
【发布时间】：2022-01-07 20:24:23
【问题描述】：

我的桌子有一个奇怪的问题，像往常一样，我希望我的表头和表单元格周围有边框，但由于某种原因，它只给了我整张桌子的边框。我该如何解决这个问题？

附上图片和代码

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;

}

【问题讨论】：

标签： html css html-table

【解决方案1】：

您在问题中发布的代码确实不仅在整个表格周围设置了边框，而且在每个td 和th 周围都设置了边框。

我想您可能不希望单元格有单独的边框。在这种情况下，您应该仅将边框应用于td 和th（即单元格），另外将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>

【讨论】：

谢谢，但这对我不起作用，可能是我使用引导程序导致了这些问题，因为即使我随意复制您的代码，它仍然无法工作
好吧，你应该在问题中写下你正在使用 Bootstrap - 我们闻不到 ;-)
我知道我的错，我不经常发帖，但这会是问题吗？
当然：Bootstrap 使用了很多 CSS 样式，在添加额外的 CSS 时必须考虑
对于您添加的每个 CSS 规则，您必须确保它覆盖任何可能已经存在的 Bootstrap 规则。为此，您需要使用比 Bootstrap 规则更特定的 CSS 选择器，所以这是 CSS 特定性的问题

【解决方案2】：

解决此问题的最佳方法是注意您使用的 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; }

【讨论】：

【解决方案3】：

@remi03 你能试试这些代码吗原来的： bu kodları bir denermisiniz。

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。