title: How do I remove all of the borders from an HTML <table>?
body: <p>I just made my new website public. I need help removing ALL of the borders from the table on my website, <a href="http://nicholashubbard.cu.cc" rel="nofollow noreferrer">http://nicholashubbard.cu.cc</a>. I have tried almost every solution on Stack Overflow that I can find, but none of them worked. I will provide the following examples:</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Roboto|Pacifico" media="screen"            rel="stylesheet" type="text/css"&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css"&gt;
  &lt;script type="text/javascript" src="https://gumroad.com/js/gumroad.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;title&gt;Nicholas Hubbard Web Design&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="page-wrapper"&gt;
    &lt;div id="absolute-wrapper"&gt;&lt;img src="images/banner.png" class="image" alt="Nicholas Hubbard Web Design Banner"&gt;
      &lt;div class="paragraph"&gt;
        &lt;p&gt;I am a web developer with real results. Together, we can build the site of your dreams.&lt;/p&gt;
      &lt;/div&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td class="td-2"&gt;Simple Website&lt;/td&gt;
            &lt;td class="td-1"&gt;$15&lt;/td&gt;
            &lt;td class="td-1"&gt;&lt;a class="btn btn-info" href="https://gum.co/QVfVs"&gt;Let's a-go!&lt;/a&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td class="td-1"&gt;Advanced Website&lt;/td&gt;
            &lt;td class="td-3"&gt;$45&lt;/td&gt;
            &lt;td class="td-3"&gt;&lt;a class="btn btn-info" href="https://gum.co/vCzQx"&gt;We have liftoff!&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td class="td-1"&gt;Extreme Website&lt;/td&gt;
            &lt;td class="td-1"&gt;$100&lt;/td&gt;
            &lt;td class="td-1"&gt;&lt;a class="btn btn-info" href="https://gum.co/cppM"&gt;Let's do this.&lt;/a&gt; &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="meh"&gt;
    &lt;p&gt;A site by &lt;span class="override"&gt;Nicholas Hubbard&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS Code:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>* {
    -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;
  }
  </code></pre>
  
  <p>I also have provided what it looks like right now </p>
  
  <p><img src="https://i.stack.imgur.com/fbwSu.png" alt="enter image description here"></p>
  
  <p>I would like to remove the lines in between the table objects. How would I do this?</p>