tr 和边框的边距不起作用，css 和 html

Question

这是我得到的：

http://jsfiddle.net/62hKs/2/

我的愿望：

1. 1) 您看到的两个红色框之间的上边距 15 像素
2. 2) 在每 2 个框中，它看起来像 4 个，我想删除 中间的红线，所以只有 2 条，所以它不会变成红色 行，因为选择器位于新的 td 中

我做了什么：

我以自己的方式在 4 tr 周围的红色边框上做了，因为经过一些研究后我找不到任何更聪明的方法，然后我尝试了 #mytable tr{ margin: 15px } 这不起作用，还尝试在css highlightRowStart, highlightRowMiddle, highlightRowEnd 但也不起作用..

如何应用边距？

Answer 1

您必须将 display 属性设置为 block 才能将边距应用于表格元素。默认显示属性设置为table，does not respond to margin and padding rules。

尝试类似：

table {border: 1px solid #f00;}
tr {display:block}
tr:nth-child(5) {margin-top:15px;border-top:1px solid #f00;}
td:first-child {width:200px;}

另外，考虑在选择元素上制作左侧单元格标签，或者更好的是，完全放弃表格进行布局。 <section> 有两个孩子 <ul>，您可能会有更大的灵活性，其中 <li> 将包含 <label> 和 <select>：

<style>
  section { width:600px; }
  ul { border:1px solid #f00; margin:10px 0 0 0; padding:10px;}
  li { margin:8px 0; width:400px; clear:both; }
  select { float:right; }
</style>

<section>
  <ul>                                                                                                                                                                                                          
    <li>
      <label for='seats_timeclock[]'>Foo</label>
      <select name="seats_timeclock[]">
        <option value="08:00">08:00</option>
        <option value="08:30">08:30</option>
        <option value="09:00">09:00</option>         
      </select>          
    </li>
  </ul>
  <ul>                                                                                                                                                                                                          
    <li>
      <label for='seats_timeclock[]'>Bar</label>
      <select name="seats_timeclock[]">
        <option value="08:00">08:00</option>
        <option value="08:30">08:30</option>
        <option value="09:00">09:00</option>         
      </select>          
    </li>
  </ul>
</section>

http://jsfiddle.net/sSmCc/3/

Answer 2

请参阅此示例：http://jsfiddle.net/FypSu/

你想要的是旧的 cellspacing html 属性。 CSS 等效项是边框间距。