CODEWITHSUNDEEP
htmlcssgoogle-chromehtml-table
David Ljung Madison Stellar
David Ljung Madison Stellar

Reputation: 3205

Can't remove 1 pixel bottom border from <span> inside <td>;

I have a simple table, and it has a 1 pixel space underneath the <td> elements.

I've tried getting rid of margins/padding/border-collapse/border-spacing/etc.., and it's still there.

Here's a simple case:

<table border=0 cellpadding=0 cellspacing=0 style='margin: 0px; padding: 0px; border: 0; border-spacing: 0; border-collapse: collapse;'>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='background-color: red; margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
                The first span
            </span></td>
    </tr>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='background-color: red; margin: 0px; padding: 0px; border: 0;'>
            <span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
                The second span
            </span>
        </td>
    </tr>
</table>

Also available at: http://jsfiddle.net/ydk4zob9/

On Chrome 41.0.2272.89 (but not firefox) I see 1 pixel of the red background from the td showing underneath the span

Table on chrome

How can I remove this?

Upvotes: 1

Views: 1654

Answers (2)

dippas
dippas

Reputation: 60563

you just need to set span to display:inline-block

why?

because span is an inline element therefore takes a whitespace in your HTML into account.

here is a snippet:

table {
  border-collapse: collapse;
}
td {
  background-color: red;
  padding:0;
}
span {
  background-color: white;
 
}
.first span {
  display: inline  /*the default value*/
}
.second span {
  display: inline-block
}

.third span {
  display: block
}
<h1>Inline</h1>
<table class="first">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Inline-block</h1>
<table class="second">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Block</h1>
<table class="third">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>

EDIT:

After the comments, here is a must read about INLINE ELEMENTS vs INLINE-BLOCK ELEMENTS

Upvotes: 1

Vijay
Vijay

Reputation: 114

use border bottom instead using background color red

<table border=0 cellpadding=0 cellspacing=0 style='margin: 0px; padding: 0px; border: 0; border-spacing: 0; border-collapse: collapse;'>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px;border-bottom:1px solid red'>
                The first span
            </span></td>
    </tr>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='margin: 0px; padding: 0px; border: 0;'>
            <span style='background-color: white; margin: 0px; padding: 0px; border-bottom:1px solid red'>
                The second span
            </span>
        </td>
    </tr>
</table>

Upvotes: 0

Related Questions