0

我搜索了一下，并没有真正找到我正在寻找的答案。

我有一张桌子，在一个固定高度的 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>
4

1 回答 1

3

将此 css 规则添加到您的 div 容器中：overflow-y: scroll

于 2012-11-03T23:40:42.283 回答