少し調べてみましたが、探している答えが実際には見つかりませんでした。
固定高さの div 内にテーブルがあります。
テーブルは Javascript を介して動的に追加されるため、各行はユーザー入力とボタン クリック イベントに基づいて追加されます。
テーブルの幅とセルの幅はすべて設定されており、情報の追加は機能しますが、行が多すぎると、その周りに定義された div 領域からテーブルが作成され続けます。
テーブルが大きくなるにつれて、ユーザーがその div 領域をスクロールして、テーブルに追加された他のフィールドを表示できるように、div 領域をスクロール可能にするにはどうすればよいですか?
以下は、CSS、Javascript、html の私のコードです。
いつものように、どんな助けも大歓迎です。
-----------------------CSS -------------------------- -------
#notesEntered {
float:left;
border: 1px solid #bbbbbb;
height:300px;
width:850px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.noteEntryField {
position:relative;
top:20px;
}
.noteEntryButton {
position:relative;
top:20px;
height:27px;
outline:none;
text-align:center;
background: #66ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
background: -moz-linear-gradient(top, #66cc33, #669933);
font-size:14px;
border-radius:4px;
color:#606060;
text-shadow:2px 2px 2px #f0f0f0;
}
.noteTable {
max-height:300px;
border:1px solid #cccccc;
border-collapse:collapse;
width:850px;
}
.inLnBlk {
display:inline-block;
}
.noteHeaderCells {
border:1px solid #dddddd;
background-color:#1111ff;
color:#ffffff;
}
.cellDateEntered {
width:200px;
}
.cellEnteredBy {
width:175px;
}
.cellNoteEntered {
width:475px;
}
.noteBodyCells {
border:1px solid #dddddd;
}
------------------- JS ----------------------
function addNoteRow()
{
event.preventDefault();
console.log("Made it to note entry.");
var noteTxt = $('#noteEntry').val();
var noteEntBy = 'BGM';
var nowNote = Date();
var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
if (!document.getElementsByTagName) return;
tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1=document.createElement("TD");
cell2=document.createElement("TD");
cell3=document.createElement("TD");
textnode1=document.createTextNode(noteEntDate);
textnode2=document.createTextNode(noteEntBy);
textnode3=document.createTextNode(noteTxt);
cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tabBody.appendChild(row);
document.getElementById("noteEntry").value = '';
document.getElementById("noteEntry").focus();
}
--------------------HTML--------------------------------------
<div id="Notes" class='acceptEnterNotes'>
<form>
<input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" />
<button type="submit" onclick="addNoteRow()" class="noteEntryButton buttonAddNote" id="sendNoteToDispatch" value="Submit">Submit Note</button>
</form>
<br /><br />
<div id="notesEntered">
<table id="notesEnteredGrid" class="noteTable">
<tbody class="inLnBlk">
<tr class="enteredNotesHeader">
<td class="noteHeaderCells cellDateEntered">Date Entered</td><td class="noteHeaderCells cellEnteredBy">Entered by</td><td class="noteHeaderCells cellNoteEntered">Note</td>
</tr>
</tbody>
</table>
</div>
</div>