質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1262閲覧

html5>tableの高さに不要なスペースができます

YosiyukiUsijima

総合スコア42

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/24 12:37

html5とphp5+postgreSQLでメッセージ閲覧ページを作っています。
自分のメッセージは、編集や削除ができるように細工をしているのですが、表を出したときに上下に不要なスペースができます。
cssで何とか省こうとしていますが、編集するためのボタンを付けるとスペースができます。
ボタンを外すと、スペースはなくなります。
メッセージには改行があるので、できればその改行を生かしたいと考えています。
どうすれば、上下のスペースがなくすためにはどうすればよいか、お教えください。

やろうとしている事
・「内容」欄には入力者の入力がそのまま表示できるように textarea タグを使っています。
・ブラウザのサイズ加減で、文字が外に出ないようにしようとしています。

試したこと
・スタイルシートの white-space を変えてみました。pre-lineに今は落ち着いています。
・tdタグに最小の高さを入れて、自動的に調整がかかると思い「line-height: 8px」を使ってみましたが文字が重なりだめでした。

現在の画面
イメージ説明

剛田剛の枠が野比のび太の枠に比べて上下にスペースがあります。
「ボタン」欄に「修正」と「削除」のボタンがあるのですが、これがあると上下にスペースができ、ないと下の段のようになります。

ソース(抜粋)

html5

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 6 <style type="text/css"> 7 body { table-layout: fixed; } 8 td { white-space: pre-line; } 9 </style> 10 11</head> 12 13省略 14 15<?oho 16$date = new DateTime(); 17$tstamp=$date->format('Y-m-d H:i:s'); 18$user=$_SERVER["PHP_AUTH_USER"]; 19$name=$_POST["name"]; 20$number=$_POST["number"]; 21 22$a1="select 記録者名,日時,内容,code,no from msg where 受番='" . $number . "' order by 日時 DESC"; 23$a2=pg_query($con,$a1); 24$a3=pg_num_rows($a2); 25 26echo "<table border=1>\n"; 27echo "<tr><td>記録者名</td><td>日時</td><td>内容</td><td>ボタン</td></tr>\n"; 28for ($t=0;$t<$a3;$t++) { 29 echo " <tr>\n"; 30 echo " <td>" . pg_fetch_result($a2,$t,0) . "</td>\n"; 31 echo " <td>" . pg_fetch_result($a2,$t,1) . "</td>\n"; 32 echo " <td>" . pg_fetch_result($a2,$t,2) . "</td>\n"; 33 echo " <td style='vertical-align:middle;'>\n"; 34 35 if (pg_fetch_result($a2,$t,3)==$user) { 36 echo " <form action='r_dmemo.htm' method='POST'>\n"; 37 echo " <button type='submit' name='rk' value='rem'>修正</button>\n"; 38 echo " <button type='submit' name='rk' value='kesu'>削除</button>\n"; 39 echo " <input type='hidden' name='受番' value='" . $number . "'>\n"; 40 echo " <input type='hidden' name='code' value='" . pg_fetch_result($a2,$t,3) . "'>\n"; 41 echo " <input type='hidden' name='no' value=" . pg_fetch_result($a2,$t,4) . ">\n"; 42 echo " </form>\n"; 43 } 44 45 echo " </td>\n"; 46 echo " </tr>\n"; 47} 48echo " <tr>\n"; 49echo " <td>" . $name . "</td>\n"; 50echo " <td>" . $tstamp . "</td>\n"; 51echo " <form action='r_dmemo.htm' method='POST'>\n"; 52echo " <td><textarea name='comments' rows='3' cols='40'></textarea>\n"; 53echo " <input type='hidden' name='受番' value='" . $number . "'>\n"; 54echo " <input type='hidden' name='記録者名' value='" . $name . "'>\n"; 55echo " <input type='hidden' name='日時' value='" . $tstamp . "'>\n"; 56echo " <input type='hidden' name='code' value='" . $user . "'>\n"; 57echo " </td>\n"; 58echo " <td style='vertical-align:middle;'>\n"; 59echo " <input type='submit' value='登録'>\n"; 60echo " </td>\n"; 61echo " </form>\n"; 62echo " </tr>\n"; 63 64echo "</table>\n"; 65 66?> 67 68</body> 69</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

スタイルシートの white-space を変えてみました。pre-lineに今は落ち着いています。

white-space: pre-line;が適用されているため、form内の改行がすべて出力されています。
white-space: pre-line;が必要なのであれば、必要なセルにのみ適用しましょう。

投稿2020/11/24 23:19

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YosiyukiUsijima

2020/11/25 00:41

問題点がはっきりしました。 phpを使っているので、styleを外し、nl2br関数を使ったところ解決しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問