締切済み

tableの内側の線を表示したい

2014/07/03 21:31

タイトルどおり、テーブルの内側の線を書きたいのですが、CSSなどが影響しているようで縦の線が表示されません。私個人のサイトではないので、他のページのテーブルは変更できないので、私が書いている文章の途中にだけ出てくるテーブルのみに、縦線を表示させたいです。今後は使うことはないと思うので、できれば、CSSのファイルをいじることなくやりたいのですが、方法がわかりません。アイデアを貸してください。 <table style="height: 614px;" width="496" > <tbody> <tr> <td><img class="size-medium wp-image-1624 aligncenter" src="" alt="12" width="225" height="300" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1626 aligncenter" src="" alt="11" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1584 aligncenter" src="" alt="1022" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1585 aligncenter" src="" alt="1082" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1586 aligncenter" src="" alt="1092" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1627 aligncenter" src="" alt="13" width="254" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1583 aligncenter" src="" alt="P1000231" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1625 aligncenter" src="" alt="15" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> </tbody> </table>

satisfied999
お礼率34% (214/620)

CSS
回答数3
ありがとう数10

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/04 10:05 回答No.3

内側の線と言う意味が分かりません。サンプル上げておく。　スタイルシート使えれば、たいていの事はできます。 tableは、それ自体のborderと、セルのボーダーで別のものです。 tableのボーダーを二重にしたいのか、--doubleじゃまずいのか？ tbodyにボーダーを引きたいのか tableの各セルにボーダーを引きたいのかその内容imgとpを囲むボーダーをつけたいのか borderのデザインは？？dotted、dashed、solid、double、groove、ridge、inset、outset ★HTMLソース内に書くのは面倒なので、<head></head>内にこのページだけ適用させるスタイルを書くほうが良いでしょう。 <table border="1" summary="test" style="border:double 10px green;border-collapse:separate;border-spacing:20px;"> ＿<tbody style="display:table;border:10px outset red"> ＿＿<tr> ＿＿＿<td style="border:10px blue inset;padding:5px;"><img src="./images/photo/01.jpg" width="480" height="360" alt=""></td> ＿＿</tr> ＿＿<tr> ＿＿＿<td style="border:10px lime ridge;padding:5px;"><img src="./images/photo/04.jpg" width="480" height="360" alt=""></td> ＿＿</tr> ＿＿<tr> ＿＿＿<td style="border:10px fuchsia groove;padding:5px;"><img src="./images/photo/06.jpg" width="240" height="180" alt=""></td> ＿＿</tr> ＿＿<tr> ＿＿＿<td style="padding:5px;border:none;position:relative;"><img src="./images/photo/09.jpg" width="300" height="300" alt="" style="dispaly:block;width:100%;height:auto;border-style:dashed;border-color;aqua;border-width:4px 4px 0 4px"> ＿＿＿＿<p style="width:100%;margin:0;border-style:dashed;border-color;aqua;border-width:0 4px 4px 4px"> ＿＿＿＿＿＿説明＿＿＿＿</p> ＿＿＿</td> ＿＿</tr> ＿</tbody> </table>

ログインすると、全ての回答が全文表示されます。

noname#206842

2014/07/04 07:44 回答No.2

HTMLとＣＳＳを正しく理解していますか？・・・一応テストして投稿しています。 <!DOCUTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>html5/基礎・Javascriptの基礎</title>  </head> <body> <h1>Table</h1> <table border="1" rules="cols" style="height:614; width:496"> <tbody> <tr> <td>images1</td> <td>text1</td> </tr> <tr> <td>images2</td> <td>text2</td> </tr> <tr> <td>images3</td> <td>text3</td> </tr> <tr> <td>images4</td> <td>text4</td> </tr> </tbody> </table> </body> </html>

ログインすると、全ての回答が全文表示されます。