Is there a way to eliminate the border surrounding every cell in a table?

Question

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table.

<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<tdstyle="background-color: #fff;"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<td style="background-color: #fff;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>

Despite trying various solutions like adding a .no-border class border:0; to the <tr> or using inline css for the <td>, the border remains visible as shown in the image below.

https://i.stack.imgur.com/1wvnq.jpg

Any suggestions on how to completely remove the border around all table cells?

html css css-tables

Answer 1

Answer №1

To eliminate the space between table cells, you should do the following:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

This CSS code is equivalent to using the cellspacing="0" HTML attribute. Take a look at this sample:

body {
  background: grey;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

<table width="510">
  <tbody>
    <tr>
      <td style="background-color: #fff;" colspan="2" width="510">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td colspan="2">t</td>
    </tr>
  </tbody>
</table>

Answer 2

To eliminate the space between table cells, you should do the following:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

This CSS code is equivalent to using the cellspacing="0" HTML attribute. Take a look at this sample:

body {
  background: grey;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

<table width="510">
  <tbody>
    <tr>
      <td style="background-color: #fff;" colspan="2" width="510">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td colspan="2">t</td>
    </tr>
  </tbody>
</table>

Is there a way to eliminate the border surrounding every cell in a table?

Answer №1

Similar questions

Is using window.postMessage(...) a viable option for facilitating cross domain file uploads?

Struggling to successfully toggle the visibility of items

Gradually reveal each individual path of the SVG, one by one

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Transform an xlsx document into a HTML file using VBscript or batch script

Invoking a static method within a cshtml document

Transmit the Boolean value to the controller using ajax requests in asp.net.core with C# programming

Choosing a single item from multiple elements in React using React and typescript

Execute PHP script through jQuery request within the context of a Wordpress environment

When the Navbar div is set to Position:fixed, it generates empty space on the page

Transforming the NavBar in React: A guide to dynamically updating values

PHP mail function does not properly align HTML table outputs

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

When a page is changed, the Vue.js Active Menu color remains enabled

The value of Angular Input remains unchanged within a FormArray

Incorporate an image icon into an Angular grid

Tips for organizing a div into a dock panel

Tips for utilizing a particular style from a font collection?

Transmit form data via Ajax request

Crafting a captivating stacked image using just two segments