Блог

У меня есть html-таблица с 14 столбцами и 11 строками. С каждым элементом td связан определенный идентификатор, который соотносится со столбцом и строкой. Например, 3-й столбец и 2-я строка будут <td id="3-2"></td> . Я запрашиваю базу данных, в которой есть информация, которая поступает в каждый td на основе того, какой день пользователь выбирает в datepicker. Если эти данные соответствуют определенным критериям, я устанавливаю для атрибута rowspan моего элемента td значение «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> выталкивание элементов данных за пределы моей таблицы? К вашему сведению, таблица построена статически, а не динамически.

Попробуйте добавить немного css в свою таблицу, например, установить для table-layout значение fixed, а для td word-wrap значение break-word

Что-то вроде этого td { перенос слов: разрыв слова; } таблица { макет таблицы: исправлен; ширина: 100%; }