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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3514閲覧

htmlのテーブルを横に並べたい

iorin

総合スコア32

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/11/01 06:05

###前提・実現したいこと
テーブルを横に並べたいのですが上手くいきません。
具体的にはこのような形にしたいです。
イメージ説明

今はこんな感じです。

イメージ説明

最初は番号と所属を同じテーブルで作成していたのですが、
「縦でテーブルを作って」と言われやってみていますが、ずれてしまいます。
※ソースは一部抜粋、修正しています。
よろしくお願いします。

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

<div class="search-area" > <table class="listTable wide" style="table-layout: fixed;"> <TR> <TD style="width: 20px;"></TD> <TD style="width: 100px;" nowrap>番号</TD> <TD style="width: 90px;" colspan="2"> <INPUT type="text" id="No" name="No" size=10" maxlength="10" value="<?php echo isset($No) ? $No: '' ?>"> </TD> </TR> <TR> <TD style="width: 20px;"></TD> <TD style="width: 100px;" nowrap>指名</TD> <TD style="width: 170px;" colspan="2"> <INPUT type="text" name="Name" size="10" maxlength="10" id="Name" value="<?php echo isset($SelectName) ? $SelectName: ''; ?>"> <INPUT type="button" class="BtnS4" value="検索" onclick="openDialog('<?php echo $this->webroot ?>','2','0','1','2','0','0','0');return false;"> </TD> </TR> </table> <table class="listTable wide" style="table-layout: fixed;"> <TR> <TD style="width: 300px;"></TD> <TD style="width: 100px;" nowrap>所属</TD> <TD style="width: 90px;"> <?php // コンボボックスの値を生成 foreach($ShozokuList as $Shozoku) { //省略 } // コンボボックスを生成 $Attr = [ //省略 ]; echo $this->Form->select('SelectedShozoku', $ShozokuOptions, $Attr); ?> </TD> </TR> <TR> <TD style="width: 300px;"></TD> <TD style="width: 100px;" nowrap></TD> <TD style="width: 90px;"> <INPUT type="text" style="border:none" name="abc" id="abc" disabled="disabled" size="40" value="<?php echo isset($abc) ? $abc: '' ?>"> </TD> </TR> </table> </div>

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

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

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

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

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

guest

回答3

0

これでどうでしょう?

CSS

1.search-area table { 2 display:inline-block; 3}

投稿2017/11/01 06:11

masaya_ohashi

総合スコア9206

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

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

iorin

2017/11/01 06:22

ご回答ありがとうございます。 同一のクラス名を他のページでも使用しているため、CSSは変更したくないんです。。
masaya_ohashi

2017/11/01 06:23

新しいクラスを与えるとかは駄目なんですか?
iorin

2017/11/01 06:32

今回は新しいクラスを増やさない方向性でHTML内で完結したかったんです。
masaya_ohashi

2017/11/01 06:32

次からはそういった要件は質問に書いておいてくださいね。
guest

0

CSSではなく解決するならば、テーブルを1つにして順番を入れ替えてみるとか。

<div class="search-area" > <table class="listTable wide" style="table-layout: fixed;"> <TR> <TD style="width: 20px;"></TD> <TD style="width: 100px;" nowrap>番号</TD> <TD style="width: 90px;" colspan="2"> <INPUT type="text" id="No" name="No" size=10" maxlength="10" value="<?php echo isset($No) ? $No: '' ?>"> </TD> <TD style="width: 300px;"></TD> <TD style="width: 100px;" nowrap>所属</TD> <TD style="width: 90px;"> <?php // コンボボックスの値を生成 foreach($ShozokuList as $Shozoku) { //省略 } // コンボボックスを生成 $Attr = [ //省略 ]; echo $this->Form->select('SelectedShozoku', $ShozokuOptions, $Attr); ?> </TD> </TR> <TR> <TD style="width: 20px;"></TD> <TD style="width: 100px;" nowrap>指名</TD> <TD style="width: 170px;" colspan="2"> <INPUT type="text" name="Name" size="10" maxlength="10" id="Name" value="<?php echo isset($SelectName) ? $SelectName: ''; ?>"> <INPUT type="button" class="BtnS4" value="検索" onclick="openDialog('<?php echo $this->webroot ?>','2','0','1','2','0','0','0');return false;"> </TD> <TD style="width: 300px;"></TD> <TD style="width: 100px;" nowrap></TD> <TD style="width: 90px;"> <INPUT type="text" style="border:none" name="abc" id="abc" disabled="disabled" size="40" value="<?php echo isset($abc) ? $abc: '' ?>"> </TD> </TR> </table> </div>

URLも貼っておきます。
https://codepen.io/anon/pen/zPGQbQ?editors=1111

投稿2017/11/01 06:20

編集2017/11/01 06:21
yuki-saito

総合スコア928

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

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

iorin

2017/11/01 06:32

ご回答ありがとうございました。
guest

0

ベストアンサー

テーブルを横に並べたいのなら、高さ1、幅2のテーブル(外側)を作って、その中に並べる2つのテーブルを定義します。
HTMLは以下のような感じ。

<table border="0"> <!-- 外側のテーブル border="0"にして枠が表示されないようにする--> <TR> <TD> <table> <!-- 左側のテーブル --> </table> </TD> <TD> <table> <!-- 右側のテーブル --> </table> </TD> </TR> </table>

投稿2017/11/01 06:18

coco_bauer

総合スコア6915

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

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

iorin

2017/11/01 06:30

ありがとうございます。 上手くいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問