前提・実現したいこと

テーブルの中のspanが表示されてもテーブルは固定span(エラー)は右側に出力したいです。
IDとPASSの入力欄がずれないで表示したいです。

発生している問題・エラーメッセージ

該当のソースコード

php
1<?php
2session_start();
3
4define('ID', 'test');
5define('PASSWORD', 'test1234');
6
7if (!empty($_POST['send'])) {
8    if (empty($_POST['id']) || empty($_POST['password'])){
9        $error_message['something_empty'] = 'ㆍIDかPASSが空白です';
10    }else {
11        if ($_POST['id'] === ID && $_POST['password'] === PASSWORD){
12            //             $_SESSION['id'] = $_POST['id'];
13            $_SESSION['auth'] = 1;
14            header('Location: add.php');
15            exit;
16        }else {
17            $error_message['something_wrong'] = 'ㆍIDかPASSが間違っています。';
18        }
19    }
20}
21
22if (!empty($_SESSION['auth'])){
23    session_destroy();
24}
25?>
26
27<style>
28.error {color: #FF0000; float: right;}
29.textfield {width: 130px;}
30.btn {width: 148px; background-color: #ffffff;}
31</style>
32<meta charset="utf-8">
33<center>
34<form action="" method="post">
35    <table>
36    	<tr>
37    		<td align="center">ID</td>
38    		<td><input type="text" class="textfield" name="id">
39    		<span class="error"><?= (!empty($error_message['something_empty']) ? $error_message['something_empty'] : '')?></span>
40    		<span class="error"><?= (!empty($error_message['something_wrong']) ? $error_message['something_wrong'] : '')?></span></td>
41    	</tr>
42    	<tr>
43    		<td align="center">PASS</td>
44    		<td><input type="password" class="textfield" name="password"></td>
45    	</tr>
46    	<tr>
47    		<td colspan="2" align="center">
48    		<input type="submit" class="btn" name="send" value="ログイン">
49    		</td>
50    	</tr>
51    </table>
52</form>
53</center>

試したこと

spanをposition: absolute;にしてみたのですがやはりだめでした。

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

x_x

2018/11/22 08:16

<center>が追加されましたがHTML4なのでしょうか？ 4であればstyle要素にはtype属性が必要で、meta要素にはcharset属性がありません。ちぐはぐな印象を受けます。

jeonge

2018/11/22 17:21

変わったの知らなかったので<center>は実際、実行する時には入れてないです！JSP勉強する時に書いてた<center>があったのでこっちでもできるかなと思い、書きました！

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

回答1件

ベストアンサー

エラー用の列を予めつくっておくか
エラーをabsoluteな表示にするか

sample

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.error').css({
5    "position":"absolute",
6    "display":"block",
7    "top":0,
8    "left":function(){return $(this).closest('td').width()+5;},
9  });
10});
11</script>
12<style>
13#f1 table,#f2 table{border-collapse:collapse;}
14#f2 table{margin:auto;}
15#f1 table td,#f2 table td{border:solid 1px #000000;position:relative;}
16</style>
17dummy<br>
18dummy<br>
19dummy<br>
20<form id="f1" action="" method="post">
21<table>
22<tr>
23<td align="center">ID</td>
24<td><input type="text" class="textfield" name="id">
25<span class="error">error1</span>
26</td>
27</tr>
28<tr>
29<td align="center">PASS</td>
30<td><input type="password" class="textfield" name="password">
31<span class="error">error2error2error2error2</span></td>
32</tr>
33<tr>
34<td colspan="2" align="center">
35<input type="submit" class="btn" name="send" value="ログイン">
36</td>
37</tr>
38</table>
39</form>
40dummy<br>
41dummy<br>
42dummy<br>
43<form id="f2" action="" method="post">
44<table>
45<tr>
46<td align="center">ID</td>
47<td><input type="text" class="textfield" name="id">
48<span class="error">error1</span>
49</td>
50</tr>
51<tr>
52<td align="center">PASS</td>
53<td><input type="password" class="textfield" name="password">
54<span class="error">error2error2error2error2</span></td>
55</tr>
56<tr>
57<td colspan="2" align="center">
58<input type="submit" class="btn" name="send" value="ログイン">
59</td>
60</tr>
61</table>
62</form>
63dummy<br>
64dummy<br>
65dummy<br>