4

現在、プロジェクトのテーブルのカスタマイズに取り組んでいます。Twitter Bootstrap rails gem (2.2.6) を使用しています。ただし、CSS のカスタマイズに関しては、これは問題にならないと思います。

したがって、基本的には次のモックアップを実現したいと考えています。 ここに画像の説明を入力

floatただし、半径の境界線を配置しても、ブロックでleft表示しない限り何も起こりません。丸みを帯びた境界線は表示されません。次の jsfiddle を確認してください: http://jsfiddle.net/zaEFz/2/

しかし、問題は、コンテンツを左にフローティングすると、テーブルの構造が失われることです。これは、ヘッダーがコンテンツと一致しなくなったことを意味します。いくつかの質問:

  1. コンテンツをヘッダーに揃えるには? float:left を使用する場合

  2. 各行の角を丸くする方法は? float:left と display:block を使用しない場合

質問の1つに答えれば大丈夫です:)

4

2 に答える 2

21

悲しいことに、タグでborder-radiusは機能しません。タグとタグ<tr>でのみ機能します。しかし、必要なスタイルは、これらの制約内で非常に達成可能です.<th><td>

CSS

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

thead th {
  background-color: #006DCC;
  color: white;
}

tbody td {
  background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

jsフィドル

ここに画像の説明を入力

更新: Firefox で修正され、セレクターが簡素化されました。

于 2013-03-23T03:15:07.300 に答える
1

フロート/ブロックソリューションを使用する場合に物事を整列させるには、との固定幅を指定する必要があると思い<td>ます<th>:

th, td {
    width: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

別のサイドパディングが必要な場合は、合計が一致するようにそれに応じて幅を調整する必要が<th>あります。<td>

テーブルのレイアウトをそのままにしておく場合、解決策は、tr ではなく、thead の最初と最後のセルに border-radius を適用することのようです。物事を機能させるには、他のハックも必要になる場合があります。テーブル ヘッドのみに丸みを帯びた角を作成する方法と、テーブルに丸い境界線を設定し、境界線を折りたたむにはどうすればよいですか? を参照してください。参考のため。

于 2013-03-23T02:15:43.893 に答える