Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
0

How to remove table cell borders

New Here ,
Sep 27, 2012 Sep 27, 2012

Copy link to clipboard

Copied

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.

TOPICS
How to

Views

63.3K
Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 27, 2012 Sep 27, 2012

Copy link to clipboard

Copied

That can be done easily with CSS.

td {border: none}

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 28, 2012 Sep 28, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 30, 2012 Sep 30, 2012

Copy link to clipboard

Copied

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;

}

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 30, 2012 Sep 30, 2012

Copy link to clipboard

Copied

LATEST

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>

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines