Question

我正在尝试删除丑陋的蓝色表格单元格边框，并且无法通过HTML，内联CSS和内部CSS删除。我是绿色的-因此代码编写得不好。

以下是标头中的一些代码：

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  border: none;


}

</style>

这是正文中的一些代码：

<body>
  <button class="collapsible">Neutral</button>
  <div class="content">
    <p> </p>
    <table width="500" border="0" cellpadding="15" border="none">
      <tr>
        <td align="center" valign="center">
          <a href="/images/MV-B-BLK1_full.jpg">
            <img src="/images/MV-B-BLK1.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20" hspace="20" /></a>
          <br />
          Onyx MV-B-BLK1
        </td>
        <td align="center" valign="center">
          <a href="/images/xxxxxxxxxxx.jpg">
            <img src="/images/xxxxxxxxxxx-t.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20"
              hspace="20" /></a>
          <br />
          Steel Blue
        </td>
        <td align="center" valign="center">
          <a href="/images/xxxxxxxxxxx.jpg">
            <img src="/images/xxxxxxxxxxx-t.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20"
              hspace="20" /></a>

          <br />
          Peach
        </td>
        <td align="center" valign="center">
          <a href="/images/xxxxxxxxxxx.jpg">
            <img src="/images/xxxxxxxxxxx-t.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20"
              hspace="20" /></a>
          <br />

          Aqua
        </td>
      </tr>
      <tr>
        <td align="center" valign="center">
          <a href="/images/xxxxxxxxxxx.jpg">
            <img src="/images/xxxxxxxxxxx-t.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20"
              hspace="20" /></a>
          <br />
          Blue
        </td>
        <td align="center" valign="center">
          <a href="/images/xxxxxxxxxxx.jpg">
            <img src="/images/xxxxxxxxxxx-t.jpg" alt="xxxxxxxxxxx" title="Click to  view" border="20" hspace="20" /></a>
          <br />
          Plum
        </td>
      </tr>
    </table>
  </div>
  <button class="collapsible">Blue</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo
      consequat.</p>
  </div>
  <button class="collapsible">Brown</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo
      consequat.</p>
  </div>
  <button class="collapsible">Green</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo
      consequat.</p>
  </div>
</body>
<script>
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
</script>

我希望删除这些难看的蓝色边框，以使图像/单元格周围完全没有边框。

Answer 1

取出border="20"应该对其进行排序。

Answer 2

您根本没有table borders。这些边框是由您已硬编码到img标签中的border="20"属性创建的。

<img src="/images/MV-B-BLK1.jpg" alt="xxxxxxxxxxx" title="Click to     view" border="20" hspace="20" /></a>

更改或删除border="20"，然后查看会发生什么情况。

颜色为蓝色的原因是，它是锚标记的默认未设置样式的颜色，由于所有图像都是锚标记的子代，因此您可以得到该颜色。

将来，请熟悉chrome devtools。快速查看这些元素将为您显示页面上任何单个元素的内容以及所应用的样式。

如何删除丑陋的表格单元格边框？

2 个答案: