テーブルの中にテキストボックスを入れ、列の幅を調整する

Question

###前提・実現したいこと
一行目に見出し、二行目に各データを編集するテキストボックスを入れたいと思っています。
htmlのテーブル内にテキストボックスを入れる際に、列の幅を
列の見出しの長さ ＞ テキストボックスのvalueの文字列値の長さ
だった場合には列の幅を見出しの幅に合わせて、
列の見出しの長さ ＜ テキストボックスのvalueの文字列値の長さ
だった場合には列の幅をテキストボックスのvalueの文字列値の長さに合わせたいと思っています。
ご教授いただけますと幸いです。。。

###該当のソースコード

foreach ($sql->fetchAll() as $row) {
    echo '<table border="1" width:100%>';
    echo '<form action="from-search-detail.php" method="POST">';
    echo '<tr><th style="white-space:nowrap">受注NO</th><th>顧客名</th><th>ステータス</th><th>受注案件名</th><th>商品名</th>
    <th>仕様</th><th>数量</th><th>納期</th><th>受注価格</th><th>受注日</th><th>担当者</th></tr>';
    echo '<tr><td style="position:relative">
    <input type="text name="orderFromNO" value="',$row['orderFromNO'],'"style="width:100%;box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="customer" value="',$row['customer'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="status" value="',$row['status'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="projects" value="',$row['projects'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="product" value="',$row['product'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="specification" value="',$row['specification'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td style="position:relative">
    <input type="text name="num" value="',$row['num'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td>' .$row['deliveryDate']. '</td>';
    echo '<td style="position:relative">
    <input type="text name="price" value="',$row['price'],'"style="width:100%; box-sizing:border-box">
    </td>';
    $from_price = $row['price'];
    echo '<td>' .$row['fromDate']. '</td>';
    echo '<td style="position:relative">
    <input type="text name="leader" value="',$row['leader'],'"style="width:100%; box-sizing:border-box">
    </td>';
    echo '<td><input type="submit" name="update" value="更新"></td>';
    echo '</form>';
    echo '</tr>';
  }
  echo '</table>';

###試したこと
nowrapやwidthなどいろいろ変えてみましたが思うようにいかず・・・

Answer 1

ソースコード上に幾つか記述上にも問題がありそうです。
転記ミスだったらすみません。

1. <table>と<th>がforeach()の中に入ってる

つまりfetchAllで取得できる件数分だけ<table>と<th>は吐き出されるが</table>はforeach()の外でひとつになり、開閉のタグの数が合わない
0. たぶんこの書き方だとPHPのエラーが出るはずecho ' ・・・ ',$row['orderFromNO'],'
echo ' ・・・ '.$row['orderFromNO'].' ですね。文字列結合は.で行います。
0. タグの記法がちょこちょこちょこ守られてないような
例えば：<input type="text name="price" → <input type="text" name="price"
0. position:relative？
ちょっと用途が分かりません。

文字列の長さにあわせるのは難しいも知れませんが、mb_strlen()で文字数は取得できるので多少の目安にはなりそうです。

ただ、文字列の長さにあわせるのはいいのですが、入力可能なので入力されて長くなったり短くなったりした場合はどうするの？というのもありますし、伸び縮みする入力フォームも変な感じがします。
単にthにヘッダのテキスト幅＋αのmin-widthを入れておけばあとはそこそこいい感じにHTMLのほうで勝手に調整してくれるようには思います。

Comments

[ppglma]

ご指摘ありがとうございます。
すみません、色々おかしいですね・・・
<?php ?>で囲まれている中の一部分だけを抜き出してコピペしてきたので、一応これでもエラーは出ていません。
タグの記法も見落としておりました。
position:relativeはググってみたら出てきた方法を色々試してた時に書いてました。。。

データベースから一件データを読み出し、それを編集して更新するという感じにしたかったため、データベースから読みだした情報の長さに列の幅を合わせたいということも書くべきでした。すみません。

[m.ts10806]

1件なんですね。foreachなので複数件あるのかと思ってました。foreachの前でどのような処理を書かれているか分かりませんが、1件ならforeachじゃなくていいですね。
情報の長さに列の幅を合わせたいとのことであれば提案させていただいたmb_strlen()で文字数が取得されるので、それにあわせてinputにwidthを入れると良いです。全角半角入り混じることもあるのである程度の目安にしかなりませんけどね。
あと、mainの幅が分からないですが、必要に応じてthのmin-widthも入れてみてください。特に金額や個数などはある程度幅が保証された方が見栄えがいいでしょうしね。

[ppglma]

ご教授ありがとうございます。
大変参考になりました。