How to style table with only vertical cell spacing?
I have a table in my HTML yet I only want vertical spacing as it doesn't look right with the 25px horizontally. I can see no attribute in HTML to do this so is it possible?
Thanks in Advance, DeanEDIT: I h开发者_JS百科ave a table with cellspacing all the way around of 25px. I would only like vertical cellspacing of 25px.
the cellpadding
attribute, which I assume you're talking about, will only take a number and use it as pixels between the cell wall and content. You'll have to come up with a workaround, depending on your layout you may want to use a <div>
instead, or if there aren't any borders around the cells you can add style='padding-bottom:25px'
to it to create the same effect.
Just add this in the < head > section, just after the head tag opening of your page: This should do the work:
<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25
px on top and bottom, zero px on left and right */
</style>
Cleaner <table>
element solution (useful for in-lining styles).
table {
border-collapse: separate;
border-spacing: 0 20px;
}
th {
background-color: blue;
color: white;
}
th, td {
width: 150px;
border: 1px solid black;
padding: 5px;
}
<table>
<tbody>
<tr>
<th>Vehicle <th>No. of Wheels <th>Rep (0-10)
<tr>
<td>Skateboard <td>4 <td>7
<tr>
<td>BMX <td>2 <td>6
<tr>
<td>Unicycle <td>1 <td>-1
I discovered this:
border-bottom: 25px solid transparent;
Be aware that IE6 has a problem with transparency.
精彩评论