CODEWITHSUNDEEP
htmlcss
Ben Muircroft
Ben Muircroft

Reputation: 3034

Table within <td> getting squashed by 2px each side

<table id="first"style="width:310px;border:2px;margin-top:10px;margin-left:auto;margin-right:auto;background:#F7F7F7;">
<tr>
    <td style="height:50px;width:100%;"></td>
</tr>
<tr><td>
    <table style="width:100%;">
    <tr>
    <td id="_1"style="background:#FF70C6;width:151px;height:20px;cursor:pointer;">Low/empty</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_2"style="background:#0099FF;width:151px;height:20px;cursor:pointer;">Unclean</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_3"style="background:#00D07B;width:151px;height:20px;cursor:pointer;">Damaged</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_4"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    </table>
</td></tr>
<tr><td id="ad"style="background:url('R/ad.png');width:100%;height:113px;cursor:pointer;"></td></tr>
<tr><td style="height:20px;width:100%;text-align:right;">text</td></tr>

I have a table inside a <td>. The parent <td> has some kind of cell spacing/padding border thing its doing that pushes the child table in slightly (top, left, right, bottom).

Although it’s only by 2px in each direction, I puke from my eye balls (violently) when I look at it, as I have an image in the <td> underneath with which the cell outer walls of the child table are supposed to be flush. Does any one know the CSS for tables, as I’m not finding w3scools/css-tricks very helpful (or maybe it’s my inability to properly form a useful coherent query string for Google to search)?

Upvotes: 0

Views: 774

Answers (1)

canon
canon

Reputation: 41705

A couple options:

  1. CSS: border-collapse: collapse (fiddle)
  2. Obsolete table attributes: cellpadding = 0 and cellspacing = 0 (fiddle).

Upvotes: 3

Related Questions