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
Use either
auto-fill
orauto-fit
as the first argument of therepeat()
notation.<auto-repeat>
variant of therepeat()
notation:auto-fill
The grid will repeat as many tracks as possible without overflowing its container.
In this case, given the example above (see image), only 5 tracks can fit the grid-container without overflowing. There are only 4 items in our grid, so a fifth one is created as an empty track within the remaining space.
The rest of the remaining space, track #6, ends the explicit grid. This means there was not enough space to place another track.
auto-fit
The grid will still repeat as many tracks as possible without overflowing its container, but the empty tracks will be collapsed to
0
.A collapsed track is treated as having a fixed track sizing function of
0px
.Unlike the
auto-fill
image example, the empty fifth track is collapsed, ending the explicit grid right after the 4th item.auto-fill
vsauto-fit
The difference between the two is noticeable when the
minmax()
function is used.Use
minmax(186px, 1fr)
to range the items from186px
to a fraction of the leftover space in the grid container.When using
auto-fill
, the items will grow once there is no space to place empty tracks.When using
auto-fit
, the items will grow to fill the remaining space because all the empty tracks will be collapsed to0px
.Playground:
CodePen
Inspecting auto-fill tracks
Inspecting auto-fit tracks