Javascript 如何防止表数据元素溢出到我的表之外

我有一个html表格，有14列11行。每个td元素都有一个与之关联的特定id，该id与列和行相关。例如，第三列和第二行是

。我正在查询一个数据库，其中包含根据用户在日期选择器上选择的日期进入每个td的信息。如果该数据满足特定条件，我将td元素上的rowspan属性设置为“2”。问题是当我这样做时，

会被推到表的外部。这是我的js，你可以知道我在做什么。其中最重要的部分从for循环开始

function createAppointments() {
        //clear the dom with the clearTags() function so appointments don't overlap
        clearTags();
        //get all of the appointments that are related to the current day. Create a date variable equal to the datepicker value
        let myDate = document.getElementById('myDate');
        let day = myDate.value;
        console.log(day);
        //update the h1 element to display the current date
        document.getElementById('date').innerText = day;
        //use day in a doquery to query appts where fid 14(appointment date) is equal to the datepicker value
        let appts = qdb.DoQueryWithQueryString(apptsDBID,"{'14'.'EX'.'"+ day + "'}","3.6.18.17.11.37.39.41.42.43.44")//6-appt time/18-service/17-patient/11-trainer/37-element id/39-duration number/41-hex code/42 - notes/43 - top/ 44- left
    
    let records = qdb.selectNodes(appts,"*/table/records/record");
    //now we have our xml tree of all of our appointment records
    //loop through each record. The element id is a field in quickbase(37) which automatically takes the trainer name and appends a "-" and the start time of the appointment, which corresponds with the td ids.
    for(var i=0;i<records.length;i++) {
     debugger;
     let rec = records[i];
     let patient = gf(rec,17);
     let service = gf(rec,18);
     let notes = gf(rec,42);
     let textToDisplay = `${patient}-${service}`;
     let eid = gf(rec,37);
     let rid = gf(rec,3);
     let rspan = gf(rec,39);
     let t = gf(rec,43); //top px
     let l = gf(rec, 44);//left percentage
     console.log(`top is ${t} and left is ${l}`);
     let p = document.createElement("p");//create a new paragraph element to put in the table data
     let q = document.getElementById(eid);
     q.appendChild(p);//append the created paragraph element to the td for the onmouseover event
     p.innerText = textToDisplay;
     p.setAttribute("id",rid);
     p.setAttribute("data-toppx",t);
     p.setAttribute("data-leftpercent",l);
     p.setAttribute("data-notes", notes);
     q.style.backgroundColor = gf(rec,41);
     q.style.borderRadius = "10px";
     q.style.width = "225px";
     p.style.fontWeight = "bold";
     q.style.paddingLeft = "15px";
     p.setAttribute("onmouseover","showNotes(this)");//set the show notes function as an attribute of the paragraph
     p.setAttribute("onmouseleave","hideNotes()");//hide the notes div when not hovered 
     q.setAttribute("rowspan",gf(rec,39));}//set the row span attribute based on the rspan field in quick base
    }
    
    function showNotes(obj) {
        let contents = obj.dataset.notes;
        let topPX = obj.dataset.toppx;
        let leftP = obj.dataset.leftpercent;
        console.log(obj);
    let notes = document.querySelector('#notes');
    notes.style.visibility = "visible";
    notes.innerHTML = contents;
    console.log(topPX);
    console.log(leftP);
    notes.style.top = topPX;
    notes.style.left = leftP;
}

function hideNotes() {
    let notes = document.querySelector('#notes');
    notes.style.visibility = "hidden";
}

函数createAppointments（）{
//使用clearTags（）函数清除dom，这样约会就不会重叠
clearTags（）；
//获取与当前日期相关的所有约会。创建一个等于datepicker值的日期变量
让myDate=document.getElementById（'myDate'）；
let day=myDate.value；
控制台日志（天）；
//更新h1元素以显示当前日期
document.getElementById（'date'）。innerText=day；
//在doquery中使用day可查询fid 14（约会日期）等于datepicker值的应用程序
让appts=qdb.DoQueryWithQueryString（apptsDBID，“{'14''EX'.“+day+“}”，“3.6.18.17.11.37.39.41.42.43.44”）//6-appt time/18 service/17 patient/11 trainer/37元素id/39持续时间编号/41十六进制代码/42-notes/43-top/44-left
let records=qdb.selectNodes（appts，“*/table/records/record”）；
//现在我们有了所有约会记录的xml树
//循环浏览每条记录。元素id是quickbase（37）中的一个字段，它自动获取培训师名称，并附加“-”和与td id相对应的约会开始时间。
对于（var i=0；i尝试向表中添加一些css，比如将表布局设置为fixed和for td
分词

像这样的
td{word wrap:break word；}表{表布局：固定；宽度：100%；}