HTML：タイトルの隣により大きな四角欄（4等分）を表示したい

###前提・実現したいこと
タイトルの隣にタイトルよりも大きな四角欄（入力用）を表示させたいです＞＜

自分でいろいろ試してみた限りでは、タイトルのあとに改行されてしまい、そもそも同じ行に表示することもできません。。

もしできれば、その入力欄の一番右側にphp及びjsからもらった変数を表示するところまでしたいです！

回答、よろしくお願いします＞＜

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

HTML
1<table width="970">
2    <tbody>
3        <tr>
4            <td width="75%" height="52" bordercolorlight="black" bordercolordark="black">
5                <div style="width:100%; height:52px;">
6                    <tr>
7                        <td class="no_border" style="width:100%; text-align:center; word-break:keep-all; font-size:18px; font-weight:bold;">{$mainHeader}<span id="PRINT_STATUS"></span></td>
8                    </tr>
9                </div>
10            </td>
11            <td height="52" width="25%">
12                 <table width="400px" height="52px" border="1" cellspacing="0">
13                     <tr>
14                         <td>
15                         </td>
16                     </tr>
17                 </table>
18            </td>
19        </tr>
20    </tbody>
21</table>
22<!--以下ボディ部
23上記のコードだと、勝手に改行されてしまい同じ行内で表示すらできませんでした-->

###追記情報
上記コードの、{$mainHeader}の部分がタイトルです
なので、その部分は変更しないまま、<td height="52" width="25%">～</td>部分を同じ行内に表示させるようにしたいです
今は外枠線しかないですが、その中に4等分するように線をひくやりかたもわからなかったです＞＜；

はれました！こんな感じで、一番右側に変数をいれたいかんじです！

yambejp

2017/12/11 07:10

例示のものには「タイトル」にあたるものも、入力用の欄にあてはまるものもなさそうですが、具体的にどの部分をどう解釈しているのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

まずテーブルレイアウトは止めた方が良いです。
あくまでテーブルでやるならタイトル行のところに続けてtdを入れると良いのではとも思います。（marginやpadding等で位置調整は必要ですが）

ちなみにタイトルというかヘッダー部の右側に何かを配置するときによく使われる形はpositionとz-indexを使用した方法です。

<div  style = "width: 970px; position:relative; margin: 0 auto;">
    <div style = "text-align:center; border: 1px solid green;">
        {$mainHeader}
    </div>
    <div style = "width:300px; height: 50px; position:absolute; top: 0px;right: 0px; z-index:10">
       <input type = "text" style = "height: 30px; width:250px;">
    </div>
</div>

ちょっと仕組みが面倒（特にz-index）ですが、覚えておいて損は無いと思います。

投稿2017/12/11 07:20