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

How to remove table cell borders

New Here ,
Sep 27, 2012 Sep 27, 2012

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
63.9K
Translate
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

That can be done easily with CSS.

td {border: none}

Translate
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

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.

Translate
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

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;

}

Translate
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
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>

Translate
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