Question

这是一个糟糕的问题，我真的很抱歉这个问题。但我已经编程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>

Answer 1

添加此代码：

table {
    border-collapse: collapse;
}

＆＃13;

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

＆＃13;

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

＆＃13;

另见：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将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>

Answer 3

在表格标记中添加 cellsplaacing =“0”cellpadding =“0”，或在您的css中添加表格{border-collapse：collapse;} 。

<?php echo '<input name="test" type="text" value="'.$test.'">'; ?>

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

CSS选择器没有任何效果

3 个答案: