電子書籍の厳選無料作品が豊富!

javaの初心者です。
eclipse で、フレームワークはspringを使って開発しています。

cssが適用されないページがあって、悩んでいます。
ソース(jsp)は下記です。

出荷日の「入力ボックス(from)~入力ボックス(to)」をテーブルの1つのセルの中に改行せずに表示させたいのですが、なぜか~の前で改行されてしまいます。

カラムの幅を1500と指定していますが、適用されていないようです。
初回に表示をされると適用されませんが、入力ボックスをクリックすると、改行されなくなります。

どなたか、常に改行されないよう表示する方法をご教授いただければ幸いです。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<html>
<head>
<style>
h1 { font-size:16pt; background-color:#CCCFF; padding:3px; }
p { color: #000066; }

.sampleTable{
table-layout: fixed;
white-space: nowrap;
}
</style>

<meta charset="utf-8">
<title>${title}</title>

<script src="<c:url value="/js/jkl-calendar.js" />" type="text/javascript"></script>
<script>
var cal2 = new JKL.Calendar("caldiv2","formid","Date_From");
cal2.setStyle( "frame_color", "#3333CC" );
var cal3 = new JKL.Calendar("caldiv3","formid","Date_To");
cal3.setStyle( "frame_color", "#CC3333" );
</script>

<script type="text/javascript">

function onLoad(){

if("${ErrorMessage}" != ""){
alert("${ErrorMessage}");
}
}

</script>

</head>
<body onLoad="onLoad()" bgcolor="#FFDAB9">
<h1>${title}</h1>
<p>${message}</p>

<form:form id="formid" modelAttribute="formSyukka">

※日付欄は、カーソルを置くとカレンダーが表示されるので、カレンダーから選択してください。<br>
<table class="sampleTable">
<%-- <colgroup> --%>
<%-- <col style='width:200px;'> --%>
<%-- <col style='width:1500px;'> --%>
<%-- </colgroup> --%>

<tbody>
<tr>
<td width="200"><B>出荷日:</B></td>
<td width="1500" style="white-space: nowrap;">
<form:input type="text" path="Date_From" name="Date_From" onClick="cal3.hide(); cal2.write();"
onChange="cal2.getFormValue(); cal2.hide();"/><div id="caldiv2"></div>~
<form:input type="text" path="Date_To" name="Date_To" onClick="cal2.hide(); cal3.write();"
onChange="cal3.getFormValue(); cal3.hide();"/><div id="caldiv3"></div>
</td>
</tr>
<tr><td width="200"><B>コード1:</B></td><td width="1500" style="white-space: nowrap;"><form:input path="Code" onClick="cal2.hide(); cal3.hide();" />※あいまい検索も可能です<br></td></tr>
<tr><td width="200"><B>コード名:</B></td><td width="1500" style="white-space: nowrap;"><form:input path="mei" onClick="cal2.hide(); cal3.hide();" />※あいまい検索も可能です<br></td></tr>
<tr><td width="200"><B>図1:</B></td><td width="1500" style="white-space: nowrap;"><form:input path="Zu" onClick="cal2.hide(); cal3.hide();" />※あいまい検索も可能です<br></td></tr>
<tr><td width="200"><B>端末ID:</B></td><td width="1500" style="white-space: nowrap;"><form:input path="TermID" size="3" maxlength="3" onClick="cal2.hide();" /><br><br></td></tr>
</tbody>
</table>

<input type="submit" name="syukka_search1" value="検索" ><br><br>
<input type="button" value="戻る" onClick="javascript:history.back()">

</form:form>
</body>
</html>

A 回答 (2件)

>divがあると駄目なのでしょうか。


divはブロックタグなので無理です。

h1やpと同じといえば分かりますか?
    • good
    • 0
この回答へのお礼

再度、回答をありがとうございます!
そうなんですね!
ということは、divはカレンダーを表示させるために必要なので、上記のやり方で改行を防ぐことはできないということですね。
他の方法を考えます。
ありがとうございました。

お礼日時:2018/08/27 10:07

form:inputの間にdivが挟まってますが、そのせいでは?

    • good
    • 0
この回答へのお礼

回答ありがとうございます。

divのところは、日付項目にカレンダーを表示するようカレンダーを指定しているのですが、divがあると駄目なのでしょうか。

お礼日時:2018/08/23 10:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!