我无法为 HTML 表格设置边框答案

【问题标题】：I can't set border for an HTML table我无法为 HTML 表格设置边框
【发布时间】：2021-07-16 20:40:58
【问题描述】：

我正在学习 HTML 和一点 CSS。我在为 HTML 边框设置表格边框时遇到问题。我输入 CSS 代码，宽度和高度代码以及文本对齐代码都可以正常工作，但边框代码不起作用。这是我的代码：

<table>
  <style>
    table,
    th,
    td {
      text-align: left;
      border: 10px red;
      border-collapse: collapse;
      width: 800px;
      height: 100px;
    }
  </style>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
    <tr>
      <td>Reus</td>
      <td>11</td>
      <td>Germany</td>
      <tr>
        <td>Haaland</td>
        <td>9</td>
        <td>norway</td>
        <tr>
          <td>Kobel</td>
          <td>1</td>
          <td>Switzerland</td>
</table>

这是我网络中的结果：result in my webpage

【问题讨论】：

HTML 无效； table 的唯一有效子级是 caption、tr、colgroup、thead、tbody、tfoot。

标签： html css html-table

【解决方案1】：

祝你在 HTML 和 CSS 的学习道路上好运。

当您使用“Border Shorthand”时，请始终遵循语法，您的代码缺少边框类型。参考这里：https://www.w3schools.com/css/css_border_shorthand.asp

使用这个 CSS 代码：

table,
th,
td {
  text-align: left;
  border: 10px solid red;
  width: 800px;
  height: 100px;
}

【讨论】：

【解决方案2】：

您必须将边框 style 添加到边框定义（实线、虚线或其他）：border: 10px solid red;

（并且你应该关闭你的<tr> 标签！）

table,
th,
td {
  text-align: left;
  border: 10px solid red;
  border-collapse: collapse;
  width: 800px;
  height: 100px;
}

<table>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
  </tr>
  <tr>
    <td>Reus</td>
    <td>11</td>
    <td>Germany</td </tr>
  </tr>

  <tr>
    <td>Haaland</td>
    <td>9</td>
    <td>norway</td>
  </tr>

  <tr>
    <td>Kobel</td>
    <td>1</td>
    <td>Switzerland</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

需要定义边框类型：border: 10px solid red;

<table>
<style>
table, th, td {
text-align:left;
border: 10px solid red;
width:800px;height:100px;
}
td {

}
</style>
<tr>
<th>Player LastName</th>
<th>Player Jersey Number</th>
<th>nationallity</th>
<tr>
  <td>Reus</td>
  <td>11</td>
  <td>Germany</td>
  <tr>
    <td>Haaland</td>
    <td>9</td>
    <td>norway</td>
    <tr>
      <td>Kobel</td>
      <td>1</td>
      <td>Switzerland</td>
</table>

【讨论】：

【解决方案4】：

您需要定义边框的类型。例如solid 或dotted。有关边框属性的更多信息，请参阅here

<table>
  <style>
    table,
    th,
    td {
      text-align: left;
      border: 10px solid red;
      width: 800px;
      height: 100px;
    }
  </style>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
    <tr>
      <td>Reus</td>
      <td>11</td>
      <td>Germany</td>
      <tr>
        <td>Haaland</td>
        <td>9</td>
        <td>norway</td>
        <tr>
          <td>Kobel</td>
          <td>1</td>
          <td>Switzerland</td>
</table>

【讨论】：

【解决方案5】：

你没有提到边框类型：

这是更新后的css代码，请使用下面的css代码

  table,th,td {
            text-align: left;
            border: 10px red solid;
            width: 800px;
            height: 100px;
        }

【讨论】：