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

Question

这是我得到的：

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

我的愿望：

1. 1）您看到的两个红色框之间的边距顶部 15px
2. 2）在每 2 个盒子中，它看起来像 4 个，我想删除中间的红线，所以只有 2 个，所以它不会成为红线，因为选择器在一个新的 td 中

我做了什么：

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

我如何申请保证金？

Answer 1

您必须将 display 属性设置为 block，以便将边距应用于表格元素。默认情况下 display 属性设置为 table，它不响应 margin 和 padding 规则。

尝试类似：

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>使用两个 child可能会更灵活，<ul>其中<li>包含<label>and <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 等效项是边框间距。