CSS选择器无效

这是一个糟糕的问题，我真的很抱歉问这个问题。但是我已经编程了PHP数小时，现在试图在简单的HTML布局上显示它。我需要更多的咖啡，我的眼睛很累，醒了太早...

无论如何，问题是，由于某种原因，我的CSS样式应影响文本样式没有任何影响。边框设置和衬垫确实可以工作有点奇怪，但是字体重量或背景色却没有。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visitor logs</title>
  <style>
  html {
  }
  body {
  }
  .first_row {
    font-weight: bold;
    background-color: red;
  }
  td {
    padding: 4px 8px 4px 4px;
    border-bottom: 1px solid black;
  }
</style>
</head>
<body>
  <table>
    <tr class="first_row">
      <td>IP-address</td>
      <td>Last visited</td>
      <td>Rough location</td>
    </tr>
  </table>
</body>
</html>

添加此代码：

table {
    border-collapse: collapse;
}

table {
    border-collapse: collapse;
}
.first_row {
  font-weight: bold;
  background-color: red;
}
td {
  padding: 4px 8px 4px 4px;
  border-bottom: 1px solid black;
}

<table>
    <tr class="first_row">
        <td>IP-address</td>
        <td>Last visited</td>
        <td>Rough location</td>
    </tr>
     <tr class="second_row">
        <td>IP-address2</td>
        <td>Last visited2</td>
        <td>Rough location2</td>
    </tr>
</table>

另请参阅此信息：

table {
    border-collapse: collapse;
}
.first_row {
  font-weight: bold;
  background-color: red;
}
tr:not(.first_row) td:not(:first-child) {
    border-left: 1px solid #000;
}
td {
  padding: 4px 8px 4px 4px;
  border-bottom: 1px solid black;
}

<table>
    <tr class="first_row">
        <td>IP-address</td>
        <td>Last visited</td>
        <td>Rough location</td>
    </tr>
     <tr class="second_row">
        <td>IP-address2</td>
        <td>Last visited2</td>
        <td>Rough location2</td>
    </tr>
</table>

您可以将thead与th一起用于表格

table {
  border-collapse: collapse;
}
table th {
  font-weight: bold;
  background: red;
  padding:4px;
  border-bottom: 1px solid black;
}
td {
  padding: 4px 8px 4px 4px;
  border-bottom: 1px solid black;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visitor logs</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>IP-address</th>
        <th>Last visited</th>
        <th>Rough location</th>
      </tr>
    </thead>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </table>
</body>
</html>

添加 cellSpacing =" 0" cellpadding =" 0" 在表标签中或添加 table {border-collapse：collapse;} >在您的CSS中。

.first_row {
  font-weight: bold;
  background-color: red;
}
td {
  padding: 4px 8px 4px 4px;
  border-bottom: 1px solid black;
}

<table cellspacing="0" cellpadding="0">
  <tr class="first_row">
    <td>IP-address</td>
    <td>Last visited</td>
    <td>Rough location</td>
  </tr>
</table>

相关内容

最新更新

热门标签：