pre {
white-space: pre-wrap;
}------------------------------------------------------
<table id="table1" class="responsive">------------------------------------------------------
<thead>
<tr>
<th class="koumoku">項目名</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td class="background">項目1</td>
<td>項目1の説明</td>
</tr>
<tr>
<td class="background">項目2</td>
<td>項目2の説明</td>
</tr>
</tbody>
</table>
#table1 .koumoku {
width: 150px;
}
@media (max-width: 599px) {
#table1 .koumoku {
width: auto;
}
.responsive {
border-collapse: separate;
border-spacing: 0 20px;
}
.responsive thead {
display: none;
}
.responsive td {
border: none;
display: block;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #dddddd;
}
.responsive td.background {
background-color: #d9d9d9;
}
.responsive td:before {
content: attr(data-title) " ";
}
}------------------------------------------------------<form action="xxxxx" method="post" target="_top">------------------------------------------------------
<input type="button" value="表示文字" onclick="return kakunin('表示メッセージ。改行は\n')" >
</form>
function kakunin(msg){
var result = false;
result = window.confirm(msg);
if(result == true){
return true;
}
else{
return false;
}
}------------------------------------------------------<form action="xxxxx" method="post" id="frmID">------------------------------------------------------
<input type="button" value="クリック" id="buttonID">
</form>
$(function(){
$('#buttonID').click(function(){
if(!confirm('表示メッセージ。改行は\n')){
/* キャンセルの時は元の画面に戻る */
return false;
}else{
/* OKの時はサブミット */
$('#frmID').submit();
}
});
});------------------------------------------------------<form method="post" action="" id="frmSet" name="frmSet">------------------------------------------------------
<input type="button" id="back" value="修正">
<input type="hidden" id="mode" name="mode" value="send">
</form>
$(function(){
$('#back').on('click', function() {
$('#mode').val('syuusei');
$('#frmSet').submit();
});
});------------------------------------------------------