アプリ版:「スタンプのみでお礼する」機能のリリースについて

縦幅だけ開ける方法はありますでしょうか?
CSSは怖くていじれません

1行1列目の要素 1行2列目の要素
2行1列目の要素 2行2列目の要素
3行1列目の要素 3行2列目の要素
4行1列目の要素 4行2列目の要素

現状こういうこういう感じのテーブルを、

1行1列目の要素 1行2列目の要素

2行1列目の要素 2行2列目の要素

3行1列目の要素 3行2列目の要素

4行1列目の要素 4行2列目の要素

こういうイメージに変更したいです。

A 回答 (1件)

というか、「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」は基本ですから、単純にtable書いてスタイルシートで調整するほうが楽ですし危険もない。そもそも上記に書かれているようにメンテナンスも楽になる。失敗したらスタイルシート書き換えればよい。

 スタイルシート使うと、HTML使うよりはるかに多彩なデザインができますよ。HTMLシンプルなのでメンテナンスも楽。
※タブは (全角スペース)に置換してあるので戻す。
<table border="1" summary="サンプルの表">
 <tbody>
  <tr>
   <th>一列目</th><th>二列目</th>
  </tr>
  <tr>
   <td>1行1列目の要素M</td><td>1行2列目の要素</td>
  </tr>
  <tr>
   <td>2行1列目の要素</td><td>2行2列目の要素</td>
  </tr>
  <tr>
   <td>3行1列目の要素</td><td>3行2列目の要素</td>
  </tr>
  <tr>
   <td>4行1列目の要素</td><td>4行2列目の要素</td>
  </tr>
 </tbody>
  </table>

に対して、<head></head>内に
<style type="text/css">
<!--
table[summary="サンプルの表"]{
border-collapse:separate;/* 分離して描く */
border-spacing:0px 30px;/* 左右の間隔が0px、縦の間隔が30px */
border-style:double;
border-color:red;
border-width:5px;
}
table[summary="サンプルの表"] th,
table[summary="サンプルの表"] td{
border-style:solid;
border-color:blue;
border-width:2px 0;/* ボーダーの巾上下2px 左右0 */
padding: 0 20px;
}
table[summary="サンプルの表"] tr:nth-child(2n) td{
background-color:yellow;
}
table[summary="サンプルの表"] th{
background-color:aqua;
}
-->
 </style>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!