Removing Unwanted Table Cell Borders with CSS

Removing unwanted table cell borders with CSS

You need to add this to your CSS:

table { border-collapse:collapse }

Removing border from table cells

Just collapse the table borders and remove the borders from table cells (td elements).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.

Unwanted table cell border

Looking at your posted CSS it seems likely that the 'border' is appearing because you haven't collapsed the cell-borders; so with that in mind I'd suggest you add the rule:

border-collapse: collapse;

to the CSS rules for the table element:

table {
    border-collapse: collapse;
    border: solid 1px #eee;
    text-align: right;
}

table {  border-collapse: collapse;  border: solid 1px #eee;  text-align: right;}tr,td,th {  padding: 0;  margin: 0;  border: none;}th,td {  width: 90px;  height: 24px;  line-height: 24px;  padding: 0;}th {  background-color: #f4f4f4;}.first-col {  text-align: left;}

<table class="satisfaction">  <tr>    <th class="first-col">Kepuasan</th>    <th>1 bulan</th>    <th>6 bulan</th>    <th>12 bulan</th>  </tr>  <tr>    <td class="first-col"><span><img class="svg emo emo-smile" src="img/icon/emoticon-happy.svg">Positif</span>    </td>    <td>9393</td>    <td>9393</td>    <td>9393</td>  </tr>  <tr>    <td class="first-col"><span><img class="svg emo emo-neutral" src="img/icon/emoticon-neutral.svg">Netral</span>    </td>    <td>93</td>    <td>93</td>    <td>93</td>  </tr>  <tr class="last-row">    <td class="first-col"><span><img class="svg emo emo-frown" src="img/icon/emoticon-sad.svg">Negatif</span>    </td>    <td>39</td>    <td>39</td>    <td>39</td>  </tr></table>

How to completely remove borders from HTML table

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

And in css:

table {border: none;}

EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.

I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).

I did like this:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.

Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

Removing unwanted padding/margin/border in table of images HTML

Try to remove cellspacing & cellpadding:

<table align="center" class="gridStyle" cellpadding="0" cellspacing="0">...</table>

Removing top border from html table cells

You have a style for border present in your style.css

.entry-content tr td { border-top: 1px solid #eee; padding: 6px 24px; }

You need to override this style

Add this in your CSS

.spec_table td {
margin-left: -20px;
font-size: .9em;
line-height: 1.1em;
border-top: none !important;
}

Css: How to format and remove outlining borders of table on left and right side?

You can modify the css of the selected rows.

This will be your default css (which set the borders)

.hoverTable tr{
    background: #ffffff;
    border-bottom: 1px solid black;
    border-top:1px solid black;
}

This will be your css on hover

.hoverTable tr:not(:nth-child(1)):hover {
    border-left:5px solid black;
}

I have added an id for the top and bottom rows called notop and last

Updated HTML:

  <tr id = "notop">
  <td  class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>

<tr  id = "last">
  <td class="rowTitle">TITLE</td>
    <td>✔</td>
    <td>✔</td> 
    <td>✔</td>
  </tr>

CSS for the top and bottom rows

#notop{
    border:0px;
}
#last{
    border-bottom:0px;
}

Check out the working fiddle:http://jsfiddle.net/2o144n92/

---

Related Topics