WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:tableタグをCSSで。

wan [WriteDate : Sat Jun 16 22:40:30 2001]

ブラウザの表示として、

ほげほげ@あいうえお
     かきくけこ
     さしすせそ・・・

というような表示をtableを使わずにCSSで行いたいのです。
「ほげほげ」部分は任意文字数という条件です。
よろしければ、どなたか教えて頂きたく思います。


wan [WriteDate : Sat Jun 16 22:42:19 2001]

あ。。ずれた。。。
すみません

 あいうえお
 かきくけこ
 さしすせそ

というように同じインデント幅ということでお願いします。


andi [WriteDate : Sun Jun 17 01:27:35 2001]

div{ margin-left:1em; }

<div>
あいうえお
かきくけこ
さしすせそ
</div>

とかですか??
ぬ。


andi [WriteDate : Sun Jun 17 01:34:34 2001]

あ、<br>いれないと駄目か


wan [WriteDate : Sun Jun 17 09:07:38 2001]

いえ、そゆのではなくて、

<table>
 <tr>
   <td valign="top">
     ほげほげ@
   </td>
   <td>
     あいうえお<br>
     かきくけこ<br>
     さしすせそ<br>
   </td>
 </tr>
</table>

という感じのものをtableタグ無しで書きたいのですが。
引き続きよろしくお願いします。


yuu [MAIL] [URL] [WriteDate : Sun Jun 17 13:02:14 2001]

<ul>
<li>ほげほげ<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul></li>
<li>


yuu [MAIL] [URL] [WriteDate : Sun Jun 17 13:13:15 2001]

あ、最後の<li>が嘘。

<ul>
<li>ほげほげ<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul></li>
</ul>


andi [WriteDate : Sun Jun 17 13:56:36 2001]

<div style="float:left;width:5em">
ほげほげ@
</div>
<div style="float:left;width:5em">
あいうえお<br>
かきくけこ<br>
さしすせそ
</div>

一応


通りすがり [WriteDate : Wed Jun 20 02:36:44 2001]

<ul>
  <li>
    <span class="id">ほげほげ</span>
    <span class="mark">@</span>
    <span class="affiliation">あいうえお</span>
  </li>
  <li>
    <span class="id"></span>
    <span class="mark"></span>
    <span class="affiliation">かきくけこ</span>
  </li>
  <li>
    <span class="id"></span>
    <span class="mark"></span>
    <span class="affiliation">さしすせそ</span>
  </li>
</ul>

ul {
  display: table;
}
li {
  display: table-row;
}
.id, .mark, .affiliation {
  display: table-cell;
}
id, .affiliation {
  width: 5em;
}
.mark {
  width: 1em;
}

width は臨機応変に。


通りすがり(上記修正) [WriteDate : Wed Jun 20 02:38:41 2001]

> id, .affiliation {
>   width: 5em;
> }

.id, .affiliation {
  width: 5em;
}
な:-)
ピリオド抜けてた。


通りすがり(更に修正、すまん) [WriteDate : Wed Jun 20 02:41:47 2001]

> ul {
>   display: table;
> }
ul {
  display: table;
  list-style: none;
}

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World