CODEWITHSUNDEEP
htmlcss
Scott Walter
Scott Walter

Reputation: 9512

How come a table td width is not equal to a tr width?

So I have this simple table markup:

    <table style="border:none;margin:0;padding:0;width:288px">
      <tr style="padding:0;border:none;margin:0">
        <td style="padding:0;border:none;margin:0;width:288px;">
          <div style="width:288px;margin:0;padding:0;border:none;">xx</div>
        </td>
      </tr>
    </table>

The div and td tag return a width of 288 in the Chrome inspector as expected. However the tr and table are returning 292. Where are the those 4 extra pixels coming from?

I'm trying to get a pixel precise table to be the same with as the td. Any thoughts?

Upvotes: 2

Views: 2225

Answers (3)

TonyPartyHardy
TonyPartyHardy

Reputation: 63

In some cases setting the following css on the table-element will get everything to listen!

table-layout: fixed;

Upvotes: 0

Remigius Stalder
Remigius Stalder

Reputation: 2170

try this:

<table style="border:none;margin:0;padding:0;width:288px;-webkit-border-horizontal-spacing:0;">
  <tr style="padding:0;border:none;margin:0">
    <td style="padding:0;border:none;margin:0;width:288px;">
      <div style="width:288px;margin:0;padding:0;border:none;">xx</div>
    </td>
  </tr>
</table>

Upvotes: 0

Cyriaque C
Cyriaque C

Reputation: 36

Try adding a "border-collapse: collapse;" style to your table.

In standard HTML, the property is set to "separate", adding an (unwanted here) padding to your table.

Upvotes: 1

Related Questions