开发者

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,

Dean

EDIT: 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜