Raindrops　取扱説明書

Raindropsのtd要素の文字列は、デフォルトで、右揃えになります。

その変更は、以下のように行います。

class left center

テーブル要素に、class　leftを指定すると、表内の文字列は、左寄せになります。

 


this td is text-align left

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.
 

tableに、left　classを指定した場合でも、td要素で、ここは、中央そろえにしたい場合は、td要素に、centerクラスを追加します。

<table class="left">
<tr>
 <td class="center">
<p class="description">this td is text-align centered</p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.
 </td>
</tr>
</table>

Class auto

RaindropsはCSSの、table-layoutプロパティは、fixedです。
それぞれの列幅を指定したいときには、table要素に、auto クラスを追加してください

class autoが設定されたtableは列幅が調整されます。

<table class="auto">
<tr>
  <td>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.
  </td>
</tr>
</table>

class opacity

このクラスは、行に濃淡を付けて、行を見やすくするクラスです。