如何从 HTML <table> 中删除所有边框？ [关闭]答案

【问题标题】：How do I remove all of the borders from an HTML <table>? [closed]如何从 HTML <table> 中删除所有边框？ [关闭]
【发布时间】：2014-08-20 23:35:54
【问题描述】：

我刚刚公开了我的新网站。我需要帮助从我的网站http://nicholashubbard.cu.cc 的表格中删除所有边框。我已经尝试了几乎所有我能找到的关于 Stack Overflow 的解决方案，但都没有奏效。我将提供以下示例：

HTML 代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto|Pacifico" media="screen"            rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<title>Nicholas Hubbard Web Design</title>
</head>
<body>
<div id="page-wrapper">
  <div id="absolute-wrapper"><img src="images/banner.png" class="image" alt="Nicholas Hubbard Web Design Banner">
    <div class="paragraph">
      <p>I am a web developer with real results. Together, we can build the site of your dreams.</p>
    </div>
    <table class="table">
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="td-2">Simple Website</td>
          <td class="td-1">$15</td>
          <td class="td-1"><a class="btn btn-info" href="https://gum.co/QVfVs">Let's a-go!</a> </td>
        </tr>
        <tr>
          <td class="td-1">Advanced Website</td>
          <td class="td-3">$45</td>
          <td class="td-3"><a class="btn btn-info" href="https://gum.co/vCzQx">We have liftoff!</a></td>
        </tr>
        <tr>
          <td class="td-1">Extreme Website</td>
          <td class="td-1">$100</td>
          <td class="td-1"><a class="btn btn-info" href="https://gum.co/cppM">Let's do this.</a> </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="meh">
  <p>A site by <span class="override">Nicholas Hubbard</span></p>
</div>
</body>
</html>

CSS 代码：

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[class^="icon-  "]:before, [class*=" icon-"]:before {
  vertical-align: baseline;
  line-height: 1em;
  color: inherit;
}

i.icon {
  text-align: center;
  background-image: none;
}

body .pull-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  padding-left: 0;
  padding-right: 0;
}

#page- wrapper {
  position: relative;
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
  height: 1000px;
}

#absolute-wrapper p, #absolute-wrapper h1, #absolute-wrapper h2, #absolute-wrapper h3, #absolute-wrapper h4, #absolute-wrapper h5, #absolute-wrapper h6 {
  margin-top: 0 !important;
}

#absolute-wrapper {
  position: relative;
  width: 980px;
  margin: 0 auto;
  height: 1px;
}

#absolute-wrapper .image {
  width: 980px;
  height: 242px;
  position: absolute;
  top: 0;
  left: 0;
}

#absolute-wrapper .navbar {
  width: 940px;
  height: 42px;
  position: absolute;
  top: 253px;
  left: 19px;
}

#absolute-wrapper .navbar .navbar-inner {
  height: 42px;
  padding-left: 20px;
  padding-right: 20px;
}

#absolute-wrapper .navbar .nav li a {
  font-size: 20px;
  font-family: "roboto";
}

#absolute- wrapper .navbar .nav li a.a-1 {
  color: #000000;
}

#absolute-wrapper .navbar .nav li a.a-2 {
  color: #050505;
}

#absolute-wrapper .paragraph {
  width: 933px;
  height: 42px;
  position: absolute;
  top: 314px;
  left: 23px;
}

#absolute-wrapper .paragraph p {
  font-family: "roboto";
  font-size: 17px;
  color: #fdfcfc;
}

#absolute-wrapper .table {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 389px;
  left: 290px;
}

#absolute-wrapper .table tbody tr td {
  font-family: "roboto";
  font-size: 20px;
}

#absolute-wrapper .table tbody tr td.td-1 {
  color: #ffffff;
}

#absolute-wrapper .table tbody tr td.td-2 {
  color: #fdfdfd;
}

#absolute-wrapper .table tbody tr td.td-3 {
  color: #fdfcfc;
}

body {
  background: black;
  text-align: center;
}

.meh {
  font-family: Roboto;
}

.override {
  font-family: Pacifico;
}

td {
  border: 0 none;
}

我也提供了它现在的样子

我想删除表格对象之间的线条。我该怎么做？

【问题讨论】：

表格默认没有边框，所以你必须做一些事情来把它们放在那里。只是......不要那样做。
你可以将你的 css 缩小并格式化 html....
我会取消缩小我的 CSS，但是当取消缩小时它就像 167 行 - 我不能在休息时输入那么多空格。
另外，我确实使用easel.io设计了这个，所以也许他们添加的CSS做到了？
@Wooble 在这种情况下，它是一个实际的 table。 tables 很方便。

标签： html css

【解决方案1】：

使用这个：

<table border="0">

或者在 css 中使用它

table, tbody, td, tr
{border:none !important}

【讨论】：

【解决方案2】：

引导程序会弄乱您的代码。如果你查看你的页面，然后检查开发者控制台，你会看到这条规则：

.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}

为了可读性：

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd
}

所以把你的规则改成：

td
{
    border:none !important;
}

【讨论】：

【解决方案3】：

Bootstrap 正在为 td 容器中的所有 td 元素添加顶部边框。

将! important 添加到您的无边界规则将覆盖该规则：

td {
  border: none !important;
}

【讨论】：