0

これが私が得たものです：

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

私が望むもの：

  1. 1) 表示されている 2 つの赤いボックスの間の上部 15px の余白
  2. 2）2つのボックスごとに4のように見えます。中央の赤い線を削除したいので、2つしかないため、セレクターが新しいtdにあるため、赤い線は作成されません

私がしたこと：

いくつかの調査の後、よりスマートな方法を見つけることができなかったため、4 つの tr の周りの赤い境界線を独自の方法で作成しました。#mytable tr{ margin: 15px } を試しましたが、機能しませんでした。ハイライトされたRowMiddle、ハイライトされたRowEndでも機能しません..

マージンを適用するにはどうすればよいですか?

4

2 に答える 2

0

表要素にマージンを適用するには、表示プロパティをブロックに設定する必要があります。デフォルトでは、display プロパティは table に設定されており、margin および 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;}

また、select 要素の左側のセルにラベルを付けるか、レイアウトのためにテーブルを完全に放棄することを検討してください。に andが含まれる<section>2 つの childを使用すると、柔軟性が向上する<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/

于 2012-06-20T01:15:30.960 に答える
0

この例を参照してください: http://jsfiddle.net/FypSu/

必要なのは、古い cellspacing html 属性です。CSS に相当するものは、border-spacing です。

于 2012-06-20T01:15:35.997 に答える