Basics
For controlling "cellpadding" in CSS, you can simply use padding
on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing
CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse
property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0"
) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing
HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing
handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Either use a semi-transparent PNG or SVG image or use CSS:
background-color: rgba(255, 0, 0, 0.5);
Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
Best Answer
text-overflow:ellipsis;
only works when the following are true:px
(pixels). Width in%
(percentage) won't work.overflow:hidden
andwhite-space:nowrap
set.The reason you're having problems here is because the
width
of youra
element isn't constrained. You do have awidth
setting, but because the element is set todisplay:inline
(i.e. the default) it is ignoring it, and nothing else is constraining its width either.You can fix this by doing one of the following:
display:inline-block
ordisplay:block
(probably the former, but depends on your layout needs).display:block
and give that element a fixedwidth
ormax-width
.float:left
orfloat:right
(probably the former, but again, either should have the same effect as far as the ellipsis is concerned).I'd suggest
display:inline-block
, since this will have the minimum collateral impact on your layout; it works very much like thedisplay:inline
that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.Here's a snippet with your code, with a
display:inline-block
added, to show how close you were.Useful references: