如何防止表數據元素溢出我的表外

Question

我有一個 14 列 11 行的 html 表。 每個 td 元素都有一個與列和行相關聯的特定 id。 例如，第 3 列和第 2 行將是<td id="3-2"></td> 。 我正在查詢一個數據庫，該數據庫具有根據用戶在日期選擇器上選擇的日期進入每個 td 的信息。 如果該數據滿足特定條件，我會將 td 元素上的 rowspan 屬性設置為“2”。 問題是當我這樣做時， <td>被推到了桌子的外面。 這是我的 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";
}

如何防止<td>被推到我的桌子外面？ 僅供參考，該表是靜態構建的，而不是動態構建的。

Answer 1

嘗試在您的表格中添加一些 css，例如將 table-layout 設置為 fixed 並將 td word-wrap 設置為 break-word

像這樣的東西 td { word-wrap: break-word; }表{表布局：固定； 寬度：100%； }