[前][次][番号順一覧][スレッド一覧]

rails:813

From: "mbaba" <xml@t...>
Date: Tue, 20 Dec 2005 06:14:06 +0900
Subject: [rails:813] Re: Dynamically Updating a Table w/AJAX

馬場@大阪です
> 専用のCSS を用意して、整形した出力が出るように
> 一行中のカラムごとに class 指定する、というアプローチですか?
>
> ご教授よろしくお願いします。
>

ながくなりますが、CSSでdivやspanを使って表みたいに表示するという例で

細かい調整はわかりませんが^^;

<html><head><title></title></head>
<style>
body {
  margin: 0;
  padding: 0;
}
.linex {
  clear: both;
  width: 516px;
}
.liney {
  clear: both;
  width: 310px;
  text-align: center;
  padding-top: 6px;
}
.title {
  width: 100px;
  color: white;
  float: left;
  display: block;
  background-color: blue;
  padding-left: 5px;
  line-height: 130%;
  margin-top: 3px;
}
.datax {
  width: 200px;
  float: right;
  margin-top: 4px;
  border: 1px solid #cccccc;
  text-align: right;
}
.datay {
  width: 200px;
  float: left;
  margin-top: 4px;
  margin-left: 3px;
  border: 1px solid #cccccc;
}

#content {
  clear: both;
}
</style>
<body>

<div class="linex"><span class="title">氏名:</span><span class="datay">山田
花子</span><span class="datax">やまだはなこ</span></div>

<div class="linex"><span class="title">年齢:</span><span
class="datay">38</span><span class="datax">ほんとの年はいくつやろ
</span></div>

<div class="linex"><span class="title">特技:</span><span class="datay">ボケ
役などいろいろこなしますが、特技なしというのが特技</span><span
class="datax">あきまへんがな</span></div>

<div class="linex"><span class="title">所属:</span><span class="datay">吉本
新喜劇</span><span class="datax">よしもとしんきげき</span></div>

</body></html>


--
ML: rails@r...
使い方: http://QuickML.com/
Web Site: http://wiki.fdiary.net/rails/
ML Archives: http://www.fdiary.net/ml/rails/

[前][次][番号順一覧][スレッド一覧]

       801 2005-12-18 15:36 [gollum@h...         ] Dynamically Updating a Table w/AJAX     
       802 2005-12-18 16:46 ┣[moriq@m...          ]                                       
       810 2005-12-19 15:07 ┃┗[gollum@h...         ]                                     
       803 2005-12-18 17:57 ┣[walf443@g...        ]                                       
       808 2005-12-19 01:49 ┃┗[gollum@h...         ]                                     
       804 2005-12-18 18:27 ┣[toykyo@t...         ]                                       
       807 2005-12-19 01:49 ┃┣[gollum@h...         ]                                     
       817 2005-12-21 02:03 ┃┗[moriq@m...          ]                                     
       805 2005-12-19 00:27 ┣[xml@t...            ]                                       
       812 2005-12-19 15:22 ┃┗[gollum@h...         ]                                     
->     813 2005-12-19 22:14 ┃ ┗[xml@t...            ]                                   
       816 2005-12-21 01:50 ┃  ┗[gollum@h...         ]                                 
       815 2005-12-21 00:53 ┗[moriq@m...          ]                                       
       818 2005-12-21 02:31  ┗[gollum@h...         ]                                     
       850 2006-01-04 09:01   ┗[yoshi@o...          ]                                   
       851 2006-01-04 15:06    ┗[moriq@m...          ]                                 
       852 2006-01-04 15:56     ┗[moriq@m...          ]                               
       859 2006-01-06 05:14      ┗[yoshi@o...          ]