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

締切済

質問者：satisfied999
質問日時：2014/07/03 21:31
回答数：3件

タイトルどおり、テーブルの内側の線を書きたいのですが、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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2014/07/04 10:05

内側の線と言う意味が分かりません。

サンプル上げておく。
　スタイルシート使えれば、たいていの事はできます。

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>

- 0
- 件

通報する

No.2

回答者： nanden1548
回答日時：2014/07/04 07:44

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>