CODEWITHSUNDEEP
htmlcssxhtmlhtml-table
user1278496
user1278496

Reputation: 1066

Removing border from table cells

I know this is a dumb question but I seem to have totally forgotten how to do it.

I have a HTML table and I want to remove all borders around all the cells so that there is only one border around the entire table.

My code looks like:

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>

Upvotes: 51

Views: 343451

Answers (9)

Kevin Oswaldo
Kevin Oswaldo

Reputation: 518

As @brezanac mentioned, you can add the border-collapse, no need for anything else. I attach and example

.table {
    border: 1px solid #CCC; // only for example
    border-collapse: collapse;
}

th, td {
  border: 1px solid #CCC; // only for example
 }
<table aria-describedby="table without borders"
       class="table">
  <tr>
    <th id="id">id</th>
    <th id="name">name</th>
    <th id="price">price</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pizza</td>
    <td>7.99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Burger</td>
    <td>3.99</td>
  </tr>
</table>

<br/>

<table aria-describedby="table with borders">
  <tr>
    <th id="id">id</th>
    <th id="name">name</th>
    <th id="price">price</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pizza</td>
    <td>7.99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Burger</td>
    <td>3.99</td>
  </tr>
</table>

Upvotes: 0

The Codesee
The Codesee

Reputation: 3783

If none of the solutions on this page work and you are having the below issue:

enter image description here

You can simply use this snippet of CSS:

td {
   padding: 0;
}

Upvotes: 1

perfectionist1
perfectionist1

Reputation: 947

Just use your table inside a div with a class (.table1 for example) and don't set any border for this table in CSS. Then use CSS code for that class. 

.table1 {border=1px solid black;}

Upvotes: 3

user188654
user188654

Reputation:

Just collapse the table borders and remove the borders from table cells (td elements).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.

Upvotes: 91

humkins
humkins

Reputation: 10677

Probably you just needed this CSS rule:

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The HTML attribute for the purpose is rules=none (to be inserted into the table tag).

Upvotes: 17

mikevoermans
mikevoermans

Reputation: 4007

You might want to try this: http://jsfiddle.net/QPKVX/

Not really sure what you want your final layout to look like- but that fixes the colspan problem too.

Upvotes: 3

hjpotter92
hjpotter92

Reputation: 80639

Change your table declaration to:

<table style="border: 1px dashed; width: 500px;">

Here is the sample in action: http://jsfiddle.net/kc48k/

Upvotes: 2

js1568
js1568

Reputation: 7032

<style type="text/css">
table {
  border:1px solid black;
}
</style>

Upvotes: 3

Related Questions