echo内だけ<td style="width:xx%">が効かない

Question

#HTMLのみで記載しているヘッダーと追加窓欄は、widthが効いているのですが配列から$rowで取り出したPHPのecho内に記載したHTMLタグのwidthだけが効かないと云った状況です。
同じように設定しても、効かないのは何故なのでしょうか？tabe内のinputをclass　addを付けて画面サイズが変わっても幅いっぱいに表示にするようにしています。

1行目と2行目がHTMLとCSSのみで形成、一番下だけPHPのecho内でHTMLタグを出力しています。

以下ソースコードです。CSS HTML(ヘッダー部分) PHP部分です。

table.head {
  width: 100%;
  text-align: center;
  border:solid 1px #000;
}

.header{
  width: 100%;
}

table.head th {
  background-color:silver;
  text-align: center;
  border:solid 1px #000;
}

table.main {
  width: 100%;
}

table.add{
  width: 100%;
  color:red;
}

input.add {
  width: 100%;
}

 <table class="main">
 <tr>
 <form action="edit.php" method="post" onsubmit="return false;">
   <input type="hidden" name="command" value="insert">
   <!--データベース接続時条件保存用-->
   <input type="hidden" name ="locationset" value="<?php echo $locationset ?>">
   <input type="hidden" name ="date1" value="<?php echo $date1 ?>">
   <input type="hidden" name ="date2" value="<?php echo $date2 ?>">
   <!--ここまで-->
   <td style="width:8%"><input type ="text" name="workday" value="<?php echo date('Y-m-d', strtotime('+1 day'));?>" class="add"></td>
   <td style="width:12%"><input type ="text" name="workgroup" class="add"></td>
   <td style="width:18%"><input type ="text" name="personal" class="add"></td>
   <td style="width:18%"><input type ="text" name="product" class="add"></td>
   <td style="width:5%"><input type ="text" name="unit" class="add"></td>
   <td style="width:5%"><input type ="text" name="createcnt" class="add"></td>
   <td style="width:8%"><input type ="text" name="bestbydata" class="add"></td>
   <td style="width:18%"><input type ="text" name="remarks" class="add"></td>
   <td colspan="2" style="width:8%">
   <input type="button" class ="add" value="追加" onclick="window.location.reload(true),submit();"></td>
</form>
</tr>
</table>

<table class="main">
<?php
try{
//if (isset($_REQUEST['select'])) {
foreach ($pdo ->query($sql)as $row){ // where workdayで抽出条件を設定する
  echo '<tr>';
  echo '<form action="edit.php" method="post">';
  echo '<input type="hidden" name="command" value="update">';
  echo '<input type="hidden" name="id" value="',$row['id'],'">';
  echo '<input type="hidden" name="locationset" value="', $locationset , '">';
  echo '<input type="hidden" name ="date1" value="', $date1 ,'">';
  echo '<input type="hidden" name ="date2" value="', $date2 ,'">';
  //echo '<td>',$row['id'],'</td>'; ID非表示
  echo '<td style="width:8%"><input type ="text" name="workday"  class="add" value="',$row['workday'],'"></td>';//dateを使うなら、SQLの前でreplace
  echo '<td style="width:12%"><input type ="text" name="workgroup" class="add" value="',$row['workgroup'],'"></td>';
  echo '<td style="width:18%"><input type ="text" name="personal" class="add" value="',$row['personal'],'"></td>';
  echo '<td style="width:18%"><input type ="text" name="product" class="add" value="',$row['product'],'"></td>';
  echo '<td style="width:5%"><input type ="text" name="createcnt" class="add2" value="',$row['createcnt'],'"></td>';
  echo '<td style="width:5%"><input type ="text" name="unit" class="add2" value="',$row['unit'],'"></td>';
  echo '<td style="width:8%"><input type ="text" name="bestbydata" class="add" value="',$row['bestbydata'],'"></td>';
  echo '<td style="width:18%"><input type ="text" name="remarks" class="add" value="',$row['remarks'],'"></td>';
  echo '<td style="width:4%"><input type="button" class="add" value="更新" class="add" onclick="window.location.reload(true),submit()"></td>';
  echo '</form>';
  echo '<form action="edit.php" method="post">';
  echo '<input type="hidden" name="command" value="delete">';
  echo '<input type="hidden" name="id" value="', $row['id'], '">';
  echo '<input type="hidden" name="locationset" value="', $locationset , '">';
  echo '<input type="hidden" name ="date1" value="', $date1 ,'">';
  echo '<input type="hidden" name ="date2" value="', $date2 ,'">';
  echo '<td style="width:4%"><input type="button" class="add" value="削除" onclick="window.location.reload(true),submit();"></td>';
  echo '</form>';
  echo '</tr>';
}
// }
}catch(PDOException $e) {
 $error = $e->getMessage();
 echo $error;
}?>
</table>

echoで出力したHTMLソース

<td style="width:8%">
 <input type ="text" name="workday"  class="add" value="2020-01-11">
</td>
<td style="width:12%">
 <input type ="text" name="workgroup" class="add" value="横ピロB">
</td>
<td style="width:18%">
 <input type ="text" name="personal" class="add" value="村田・阿部・二岡・仁志・高橋(由)"></td>
<td style="width:18%">
 <input type ="text" name="product" class="add" value="アスクル小粒キャンディ">
</td>
<td style="width:5%">
 <input type ="text" name="createcnt" class="add2" value="400">
</td>
<td style="width:5%">
 <input type ="text" name="unit" class="add2" value="kg">
</td>
<td style="width:8%">
 <input type ="text" name="bestbydata" class="add" value="-">
</td>
<td style="width:18%">
 <input type ="text" name="remarks" class="add" value="-">
</td>
<td style="width:4%">
 <input type="button" class="add" value="更新" class="add" onclick="window.location.reload(true),submit()">
</td>
</form>
<form action="edit.php" method="post">
 <input type="hidden" name="command" value="delete">
<td style="width:4%">
 <input type="button" class="add" value="削除" onclick="window.location.reload(true),submit();">
</td>
</form>
</tr>
~
次の行へ～
コード

Comments

[退会済みユーザー]

phpで出力した箇所の、webブラウザ内でのhtmlソースは点検していますか？ 表示例をhtmlソースのまま質問文中に追記をお願いします。（データベースから読みだした結果を元に出力する箇所だけソースコードを示されても、第三者は再現できません。）

[kingkamehameha]

申し訳ありません。配慮が足りておりませんでしたので、ソースコードを追記させて頂きました。

[退会済みユーザー]

ふと、「onclick="window.location.reload(true),submit();"」ってコンソールにエラーメッセージとか出てないかと心配になった。

[退会済みユーザー]

タグの階層ガン無視してるから、ブラウザが適当に修正してるんじゃね

Answer 1

出力されたhtmlソースだけ見れば、

<input type="hidden" name="command" value="delete">

がtdに囲まれていないために、htmlが崩れています。

しかし、phpのコードでそのhtmlが出力されるようには見えないので、
実行物と成果物が食い違っていないかも要点検かと。

Comments

[m.ts10806]

formタグの位置もアウトっぽいやり方ですね。

[退会済みユーザー]

一行ごとにform要素を置く忙しさ、いっそ表全体でひとつのformにするのも手ではあるけど管理しきれないのかな。

[退会済みユーザー]

レガシーブラウザだといってくれるけどクロームと火狐はNGだねこれ

Answer 2

このコードだけを出されても再現確認できないのでなんとも言えませんが、
echo で出力しているから「きかない」のではなく
**正しく動くようにHTMLが組まれていないから「きかない」**のです。
PHPが出力しているのは全て「文字列」です。
ブラウザが正しく解釈できるHTMLを出力できていないだけです。

まずは固定値で正しいレイアウトのHTMLを組んで（「モック」と言います）
それができてからPHP出力でその形を目指してください。