phpで抽出した文字数により横幅のレイアウトが崩れ規則性のないレイアウトになってしまう。

Question

前提・実現したいこと

下部のlist.phpの「echo " <td >",$row['name'],"</td>";」の部分で抽出された名前の文字数により均等配置のレイアウトが崩れてしまうので、こちらの部分だけ揃え均等にしたいのですが、どの様な施しをすればよろしいでしょうか？

わかるからいらっしゃいましたらご教授お願いいたします。

list.php

	<!-- ヘッダー　読み込み -->
<?php session_start();?>
<?php require"header.html"; ?>


<?php


echo "<table>";
echo "<th >マイナンバー　　</th><th>ユーザー名</th><th>価格</th>";
$pdo=new PDO('mysql:host=localhost;dbname=shop7;charset=utf8', 'staff', 'password');

if(isset($_REQUEST["keyword"])){
    $sql=$pdo->prepare("select *from product where name like?");
    $sql->execute(["%".$_REQUEST["keyword"]."%"]);
}else{
    $sql=$pdo->prepare("select*from product");
    $sql->execute([]);
}

foreach($sql->fetchAll() as $row){
	$id=$row['id'];

		echo '<table class="table table-striped">';
		echo "<tbody>";
		echo "<tr>";
		echo '	<th scope="row">aaa</th>';
		echo "	<td>$id </td>";
		echo "	<td >",$row['name'],"</td>";　//問題の部分
		echo "	<td >bbb</td>";
		echo "	<td >bbb</td>";
	
		echo "</tr>";
		echo "</tbody>";
		echo "</table>";


}

?>

.table

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

###試したこと
下から二番目のグレーの空白の様に上の行にも施したいが、規則性が確認できず。
止まっている状態です。

※「１」の後の商品名を入れる部分の文字数を長くするとそれに伴ってグレーの部分である空白の行もつられて増える。

補足情報（FW/ツールのバージョンなど）

OS:mac

bootstrap４を使用しており読み込んでおります。

Answer 1

phpでいきなり作るのではなく静的htmlでモック作って調整してからその形をphpで目指しましょう。
静的htmlができてない状態ではphpから想定通りのレイアウトは出せません。

Comments

[Ms.yy]

m.ts10806さん了解しました！
一旦htmlで出来がりをみてみます。

[m.ts10806]

あと出力処理とDB接続含めたロジック部分が混ざっていると可読性も良くないですし、
ゴチャゴチャになって問題点の切り分けも難しくなります。
ロジックと出力を分けましょう。

もしかしたら伝わってないかもしれないので念のため。
PHPより先に完成図となるhtmlを固定データで組みましょう　という意味です。
（モックとは「試作品」です。「こういうhtmlにする」という固定データを入れたレイアウト完成予想図です。）

[Ms.yy]

なるほどです、
分けたほうがいいのですね。
DB接続の行だけは別途ファイルから読み込んでみます。
確かに言われてみればどこかの教材で別ファイルからDB系読み込んでいたので。

[m.ts10806]

むしろ完全にわけてechoだけするくらいのイメージでも良いです。
https://qiita.com/tadsan/items/fb496e450fc27c8c4494#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A8%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF%E3%81%AF%E5%88%86%E3%81%91%E3%82%8D
>貴様は自分で思ってるほど読みやすいコードは書けない。だからせめて、画面を描画する機能とそれ以外は明確に分けろ。たとへば「データベースの内容をHTMLのtableで表示する」プログラムが書きたいと思ったら、「データベースからデータを取り出して配列にする」部分と「配列をHTMLのtableで表示する」部分を分けるんだ。

[Ms.yy]

なるほどです。
分けてechoだけの部分だけのファイルでいいということですね。

これからそこも取り入れさせていただきます、

[m.ts10806]

ちょっと違いますが、「処理を書くエリアを明確に分けよう」という話です。
あまり「この情報が渡ってきている前提」でコードを書くのはよろしくありませんので。
まずは1ファイル内でも明確に分けるところから。

[Ms.yy]

了解しました＾＾

[Ms.yy]

htmlに分けてみましたが、htmlでは上記問題の様な崩れはなく正常です。

何が原因か解決できず^^;

[m.ts10806]

いえ、何よりも先にHTMLで正しいレイアウトを組んでください。分けるわけないは今回ほとんど関係ありません。phpコードの読みやすさのみの話です。

[m.ts10806]

回答の1行目が全てです。
>phpでいきなり作るのではなく静的htmlでモック作って調整してからその形をphpで目指しましょう。

[m.ts10806]

要は静的htmlが組めていてphpで出力したときに出来てないなら必要なタグを出せてないとかそういうことです。
ブラウザ「ソースを表示」してきちんと見比べてください。
「その形をPHPで目指しましょう」とは「出力されたHTMLを同じ形にしましょう」という意味です。

[Ms.yy]

デベロッパーツール はもちろん駆使してるのですが、どこに差があるのか分からずの状態です。^^;

[m.ts10806]

デベロッパーツールは補完が入ります。私は「ソースを表示」と言っています。
あとはそのソース取得してテキストファイルにでも保管してDIFFツールを使ってください。WinMergeというツールなど、差分を確認するツールはたくさんあります。
プロでも目視で確認は行いません。

[Ms.yy]

失礼しました。
ソースコードみてみます。

difiツールですか、前に言っていただいた文法チェックのことですかね？
初めて聞いたので調べてみます。

[m.ts10806]

difiではなくDIFF。[difference]の略です。
あくまで2つのテキストやデータなどを比較するものです。
「差分比較ツール」というものです。
コメントに書いたWinMergeはその1つです。

[Ms.yy]

失礼しましたDIFFですね。
比較ツールということですね。

[m.ts10806]

はい。「想定通りの出力内容になっているか」を確認します。
結局ブラウザに出力した内容のみがレイアウトに影響するので、
同じ内容が出力されていれば問題ないわけです。
差分比較により「見た目は同じように見えて実はスペースが入っていた」とか
「半角と思ってたら全角だった」とか目視では簡単に気づけないところを自動的に抽出できます。

[Ms.yy]

DIFF使ってみました。

PHPで出力された規則性がない文字数だとどうしてもそれ以降の行がズレてしまうので、同じ文字数のみ出力させてレイアウトがズレない様に施したいと思います。

[Ms.yy]

ツール使って確かに差は一目で確認できたのですが分からずでした^^;

[m.ts10806]

その「規則性のない文字数」が具体的にどんなものか気になっています。
phpで出力してレイアウトが崩れるという文字数で静的html組んでも崩れてないんですよね？
念のためそのDIFF結果のキャプチャと静的htmlのコードも追記いただけますか？

[Ms.yy]

失礼しました、
規則性のない文字数とはこの質問の一番上の画像で貼らせて頂きました「松の実」の列がバラバラの文字数だとレイアウトが崩れてしまうことです。

それと、すみません今一度確認したところhtmlでも普通に崩れてました。

[m.ts10806]

>今一度確認したところhtmlでも普通に崩れてました。
途中からですが「おそらくそうなんじゃないかなぁ」と思いながらコメントを見ていました。
あとは回答の通りです。モック部分を調整しましょう。
レイアウトだけの問題ならもしかしたらPHPのコードは対応不要かもしれません。

[Ms.yy]

すみません、今一度確認します。
どうしても無理だと思ったら、昨日お伝えさせていただいた入力文字数に制限をかけてこのlist,phpに表示されるレイアウトを均等にします。

[m.ts10806]

まぁ、そもそもPHP側で出力文字を途中で切るとか、CSSなりJavaScriptなりで調整すれば良いと思います。[...]を表示させてもいいですし、CSSならoverflowかけてスクロール出すという手もあります。

Answer 2

<?php

session_start();

$pdo=new PDO('mysql:host=localhost;dbname=shop7;charset=utf8', 'staff', 'password');

if(isset($_REQUEST["keyword"])){
    $sql=$pdo->prepare("select *from product where name like?");
    $sql->execute(["%".$_REQUEST["keyword"]."%"]);
}else{
    $sql=$pdo->prepare("select * from product");
    $sql->execute([]);
}
$rows = $sql->fetchAll();
?>
<?php require"header.html"; ?>
<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
      <th >マイナンバー</th>
      <th>ユーザー名</th>
      <th>価格</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($rows as $row): ?>
    <tr>
      <th scope="row">aaa</th>
      <td><?php echo $id ?></td>
      <td><?php echo $row['name'] ?></td>
      <td>bbb</td>
      <td>bbb</td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Comments

[退会済みユーザー]

ブラウザ上で Ctrl + U でHTMLソースを確認してください。
レイアウト以前に正しいHTMLが出力されていないはず

[Ms.yy]

上記試したましが、おっしゃる通りエラーとなりました。

[退会済みユーザー]

おっしゃる通りって何？