How to completely remove borders from HTML table

Step-by-step guide to a borderless table

Straight to the point, let's breakdown how to achieve a flawless, borderless table and tackle key aspects ensuring your table's presentation remains neat and efficient.

Kill borders with CSS (borders hate this trick)

Leverage the power of CSS using the .noBorder class, ensuring your tables, rows, and cells are border-free:

.noBorder, .noBorder th, .noBorder td {
  border: none !important; /* Make borders go poof! */
}


This is not a drill! The !important directive declares border removal with the highest authority, overriding any conflicting styles.

Minding the gap

To eliminate unwanted spacing within cells:

<table cellspacing="0" cellpadding="0">


But who needs HTML attributes when you have CSS:

table {
  border-spacing: 0; /* Who left these gaps here? */
}


Prioritize CSS for styling; it keeps your markup squeaky clean!

Uniformity across browsers

Browser consistency: easier said than done. For a table that looks the same across all browsers, explicitly remove borders on every table element:

table, th, td {
  border: none; /* Consistency: the secret sauce */
}


This rule ensures the no-border policy holds across different platforms.

Box-shadow: For the fancy folks

Who says design without borders isn't fancy? Experiment with CSS3 box-shadow:

table {
  box-shadow: none; /* Shadow banning in CSS */
}


Creating depth without traditional borders adds a subtle visual cue of separation.

Bootstrap not left out

Bootstrap, we have you covered. Override Bootstrap's styles with your custom CSS:

.table.noBorder, .table.noBorder th, .table.noBorder td {
  border: none !important; /* Because Bootstrap also needs a taste of the borderless life */
}


The .table class ensures Bootstrap defaults to your shiny new borderless design.

Pro tips for those extra style points

When legacy haunts

Stuck with an older table with inline border attributes? Fret not! A CSS override can clean the mess:

table[border] {
  border: none !important; /* This exorcism command gets rid of border spirits from the past */
}


Directly targeting attributes ensures your border nullification is absolute.

Responsiveness: Check

Responsiveness and tables can be at odds. Make sure your borderless design plays nice with variable screen sizes:

@media (max-width: 768px) {
  .noBorder, .noBorder th, .noBorder td {
    border: none !important; /* A borderless design at every size */
  }
}


The integrity of your content's fluidity is sacred, so protect it with media queries.

Visual delimiters without borders

Want a visual delimiter without resorting to borders? Check out box-shadow's faux line capabilities:

.noBorder td {
  box-shadow: inset 0 -1px 0 #ddd; /* The magician's separator line */
}


This allows a soft separator that enhances readability minus the hardness of traditional borders.