如何删除难看的表格单元格边框？答案

【问题标题】：How do i remove ugly table cell borders?如何删除难看的表格单元格边框？
【发布时间】：2019-09-24 11:44:00
【问题描述】：

我正在尝试移除难看的蓝色表格单元格边框，但无法通过 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>

我很想去掉这些难看的蓝色边框，这样图像/单元格周围就没有边框了。

【问题讨论】：

只是好奇，为什么选择表格布局而不是div布局？这是针对标准 HTML 文档还是因为兼容性问题而必须是表格？

标签： html css html-table

【解决方案1】：

你根本没有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】：

取出border="20"，应该整理一下。

【讨论】：