Question

我刚公开了我的新网站。我需要帮助从我的网站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;
}

我现在也提供了它的样子

enter image description here

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

Answer 1

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

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

td {
  border: none !important;
}

Answer 2

Bootstrap会弄乱您的代码。如果您查看您的页面，请检查开发者控制台，您将看到此规则：

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

Answer 3

使用此：

<table border="0">

或者在css中使用它

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

如何从HTML？<table> </table>中删除所有边框

3 个答案: