Skip to main content
S
sampath_c
Participant
September 28, 2012
Question

How to remove table cell borders

  • September 28, 2012
  • 2 replies
  • 64102 views

Hi,

I’m using dreamweaver cs6.first i create a HTML page then i create a div tag (800w 900 h) & create a table inside of above div. i want to keep table border & make it to tickness, want to remove cell borders. I can’t find any options to remove the cell borders. Please any one can help me.

Thank you.

This topic has been closed for replies.

2 replies

davidhelp
davidhelp
Inspiring
October 1, 2012

table.borderless {

border-width: 0px;

background-color: white;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 1.2em;

text-align: center;

text-transform: none;

}

table.borderless th {

    border-width: 0px;

    padding: 5px;

    background-color: white;   

}

table.borderless td {

    border-width: 0px;

    padding: 5px;

    background-color: white;

----------------------------

<table width="250" height="150" align="center" class="borderless">

<tr>

  <th colspan="2" class="style1">Borderless table<br />

   cell 1 & 2 merged</span> </th>

  </tr>

<tr>

  <th class="borderless">cell 3 </th>

  <td class="borderless">cell 4 </td>

</tr>

<tr>

    <th>cell 5 </th>

    <td>cell 6 </td>

</tr>

</table>

Jarrod_Cooper
Jarrod_Cooper
Participant
September 28, 2012

That can be done easily with CSS.

td {border: none}

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
September 28, 2012

To make the outer border thicker while removing the cell borders, you can add...

table {border:5px;}

td {border:none;}

I know Jarrod didn't mean to miss it, but don't forget the ; at the end of the td {border:none;} it can cause issues with the rest of your css.

David_Powers
David_Powers
Inspiring
September 30, 2012

Jon Fritz II wrote:

To make the outer border thicker while removing the cell borders, you can add...

table {border:5px;}

td {border:none;}

Actually, that will remove the border from both the table and the table cells.

When using the border shorthand property, you must include a value for border-style. Otherwise, no border will be drawn because the default value for border-style is "none". Dreamweaver's Design view incorrectly displays a border, but it won't work in Live view or in a browser.

To make the outer border thicker while removing the cell borders:

  1. Remove the border value from the table's opening tag. This removes all borders (both table and cells).
  2. Add the following style rule:

table {

    border: 5px solid;

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices