特定の列だけ大きく表示させたい

こまかな設定はしていませんが、これだけでも十分に効果がありますね。

結構複雑ですが、スタイルシートだけで、実装しています。

    大人気
Jimdo Pro
 
  Jimdo Free Jimdo Business
費用/年間 0円 11,340円 28,980円
     
ドメイン なし 1つ 2つ
メールアドレス なし 1メールアドレス 20メールアドレス
アクセス解析 なし あり あり
SEO トップページのみ 全てのページ 全てのページ
広告 表示 非表示 非表示
モリサワフォント なし なし あり

上記のテーブルのHTML

<table align="" class="table4" style="width: 100%;">
<colgroup>
<col style="width: 23%;" />
<col style="width: 23%;" />
<col style="width: 31%;" />
<col style="width: 23%;" />
</colgroup>
<thead>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<th rowspan="2">大人気<br /> Jimdo Pro</th>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<th>Jimdo Free</th><th>Jimdo Business</th></tr>

</thead>

<tfoot>

<tr>

<td>費用/年間</td>

<th>0円</th>
<th rowspan="2">11,340円</th>
<th>28,980円</th></tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>ドメイン</td>

<td>なし</td>

<td>1つ</td>

<td>2つ</td>

</tr>

<tr>

<td>メールアドレス</td>

<td>なし</td>

<td>1メールアドレス</td>

<td>20メールアドレス</td>

</tr>

<tr>

<td>アクセス解析</td>

<td>なし</td>

<td>あり</td>

<td>あり</td>

</tr>

<tr>

<td>SEO</td>

<td>トップページのみ</td>

<td>全てのページ</td>

<td>全てのページ</td>

</tr>

<tr>

<td>広告</td>

<td>表示</td>

<td>非表示</td>

<td>非表示</td>

</tr>

<tr>

<td>モリサワフォント</td>

<td>なし</td>

<td>なし</td>

<td>あり</td>

</tr>

</tbody>

</table>

テーブルのHTMLの貼り付け方

クリックすると拡大表示されます。右ボタンで作業の順番が表示されます。
左側からクリックしてください。

CSS


<style type="text/css">

    .table4{

        border-collapse:collapse;

        padding:0;

        margin:0;

        border:none;

    }

    

    .table4 th,.table1 td{

        font-weight:bold;

        border:none;

        padding:5px 5px 7px;

        font-size:90%;      

        color:#333;

        text-align:center;

        vertical-align:middle;

        font-size:80%;

        color:#FFF;

    }


    .table4 thead th{

        background:linear-gradient(#008080,#007070);

        border:2px solid #333;

        border-bottom:2px solid #333;

    }

    

    .table4 tbody td{

        background:#444;

        border-bottom:2px groove #CCC;

        border-left:2px solid #000;

        border-right:2px solid #000;

    }

        

    .table4 tfoot th{

        background:#333;

        border:2px solid #000;

        border-top:none;

    }

    

    .table4 tbody tr:first-child td{

        border-top:10px solid #3cb371; 

    }

        

    .table4 tbody tr:last-child td{

        border-bottom:2px solid #3cb371;

    }

    

    .table4 tfoot tr:last-child th, 

    .table4 tfoot tr:last-child td,

    .table4 tehad tr:first-child th, 

    .table4 thead tr:first-child td{

        padding:0;

        font-size:10px;

    }


    .table4 tfoot tr th:nth-child(3),

    .table4 tbody tr td:nth-child(3),

    .table4 thead tr th{

        background:#222;

        font-size:120%;

    }

</style>


▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422