Question

我正在学习 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

Answer 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;
}

Answer 2

需要定义边框类型：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>

Answer 3

您需要定义边框的类型。例如 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>

Answer 4

你没有提到边框类型：

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

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

Answer 5

您必须将边框 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>

我无法为 HTML 表格设置边框

5 个答案: