Space between two rows in a table?

Is this possible via CSS?

I'm trying

tr.classname {
  border-spacing: 5em;
}

to no avail. Maybe I'm doing something wrong?

---

You need to use padding on your td elements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.

In the CSS code below, the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder . This will make it possible to use nested tables. (Cell C and D in the example code.) I'm not too sure about browser support for the direct child selector (think IE 6), but it shouldn't break the code in any modern browsers.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

---

In the parent table, try setting

border-collapse:separate; 
border-spacing:5em;

Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn't support the "separated borders" model.

---

You have table with id albums with any data... I have omitted the trs and tds

<table id="albums" cellspacing="0">       
</table>

In the css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

链接地址: http://www.djcxy.com/p/15670.html

上一篇: 如何删除jQuery UI对话框上的关闭按钮？

下一篇: 表中两行之间的空格？