2

I have a 

<table>
   <tr>
       <td><span style="margin-left: 48px; width: 20px;">2</span></td>
   </tr>
</table>

The span seems to have a margin but the width does not work. Is there a way I can make this work? Note that I thought of using a <div> but from what I understand it might work but it's not allowed inside a <td>.

Le_Morri
  • 1,619
  • 14
  • 18
Samantha J T Star
  • 30,952
  • 84
  • 245
  • 427

3 Answers3

14

span is inline by default. For it to understand the width it needs to be at least inline-block.

So add the following styles to your css-file:

td span {
    display: inline-block;
}

P.s. Mind that display: inline-block; works from ie8 and higher.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
skip405
  • 6,119
  • 2
  • 25
  • 28
  • Beat me to the punch :) One thing to watch with `inline-block` is that it's not supported on IE8 out-of-the-box. – Brandon Taylor Oct 29 '13 at 12:39
  • @skip405 Why not use a
    ?
     – Squirrel5853 Oct 29 '13 at 12:42
  • @Brandon, yep, I thought of adding that to the answer too :) – skip405 Oct 29 '13 at 12:42
  • @SecretSquirrel, there are various ways of solving the issue ;) We are not sure if we can edit html in this case.. – skip405 Oct 29 '13 at 12:43
  • @skip405 yes I understand that, but I thought it might be worth mentioning that if we are changing the to use inline-block that there are alternative from using a :) – Squirrel5853 Oct 29 '13 at 12:45
  • 2
    @SecretSquirrel `span` tags are meant for styling content within other content. `div` has no semantic meaning. Either will work fine in this case, but if the intent is to alter the styling of the content, I would choose a `span` tag. – Brandon Taylor Oct 29 '13 at 12:45
  • Also found [this](http://stackoverflow.com/questions/1611065/span-vs-div-inline-block) as a resource for why use a and not a
    :)
     – Squirrel5853 Oct 29 '13 at 12:48
  • @Brandon, you've got a typo in your first comment, surely you meant to say on IE7 :) – skip405 Oct 29 '13 at 12:49
  • @skip405 It depends on compatibility mode, which makes IE 8 render as if it were IE 7. To get it working consistently, I always add: `` Thanks for "compatibility mode" Microsoft. It's made life so much better for presentation layer developers for years (sarcastically rolls eyes) – Brandon Taylor Oct 29 '13 at 12:52
1
<table>
   <tr>
       <td><span style="margin-left: 48px; width: 20px; display: block;">2</span></td>
   </tr>
</table>

Add display: block; and then the <span /> will resize according to the given pixels on the width property.

0

Add the following display property into td.

<td>
       <span style="display: table;">Your Content</span>
</td>
Ahmad Sharif
  • 4,141
  • 5
  • 37
  • 49