Question

我正在为通过javascript动态生成的网页制作日历。然而，我似乎无法让所有细胞都处于相同的高度，除非它们都是空的。我把div放在每个单元格中，将宽度和高度设置为固定，设置max-height和max-widths，无论如何，表格似乎完全忽略了CSS，并根据需要调整自己的大小。是什么让这个问题更令人愤怒的是，填充表格单元格和空表格单元格之间的区别仅为7像素。

我最近的想法是编写一个javascript / jquery函数，遍历单元格，找到最大的单元格，并将所有其他单元格的大小调整为与该单元格相同的大小（我不特别在意大小提供的单元格宽度和高度都相同。但是，我发现jquery的高度和宽度函数在解析为int时，只返回为高度和宽度设置的CSS值，或者如果没有设置值（或者值设置为auto）则返回0.是否有将给出表格单元格的绝对宽度和高度的函数？或者，有没有办法保持表格单元格的尺寸完全固定（无论内容如何，它们都不会调整大小）。

HTML：

<div id="calroot" hidden>
    <table id="calendar">
    <tr>
        <th class="day_spaces">Sunday</th>
        <th class="day_spaces">Monday</th>
        <th class="day_spaces">Tuesday</th>
        <th class="day_spaces">Wednesday</th>
        <th class="day_spaces">Thursday</th>
        <th class="day_spaces">Friday</th>
        <th class="day_spaces">Saturday</th>
    </tr>
    <tr id="wk1"></tr>
    <tr id="wk2"></tr>
    <tr id="wk3"></tr>
    <tr id="wk4"></tr>
    <tr id="wk5"></tr>
    <tr id="wk6"></tr>
    </table>
</div>

CSS：

table {
    padding: 15px;
    border-radius: 2px;
    background-color:#fff;
}
.list_spaces {
    border: 1px solid #e1e1e1;
    text-align: center;
}
.day_spaces {
    background-image: url("../../Content/linen.png");
    text-align: center;
    width: 100px;
    overflow: hidden;
}
.cal_spaces {
    width: auto;
    height: auto;
    vertical-align: 50px;
    border: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    overflow: hidden;
}
.cal_date_nums {
    text-align: right;
    position: relative;
    font-size: 16px;
    color: #999999;
    opacity: 0.58;
    right: 12px;
    top: 12px;
}
.cal_event_links {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.cal_actual_links {
    text-align: left;
    font-size: 12px;

}
.fix_cells {
    width: 100px;
    height: 114px;
}

生成表格的Javascript：

    function loadCalendar(cd) {
    document.getElementById("my_disp").innerText = findMonthandYear(cd.getMonth(), cd.getFullYear());
    document.getElementById("my_disp").setAttribute("data-month", cd.getMonth());
    document.getElementById("my_disp").setAttribute("data-year", cd.getFullYear());
    var sd = findMonthStart(cd.getMonth(), cd.getFullYear());
    for (var i = 0; i < sd; i++) {
        document.getElementById("wk1").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
    }
    var dc = 1;
    for (var i = sd; i < 7; i++) {
        document.getElementById("wk1").innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
        dc++;
    }
    var dim = getDaysInMonth(cd);
    for (var w = 2; w <= 6; w++) {
        for (var i = 0; i < 7; i++) {
            if (dc <= dim) document.getElementById("wk" + w).innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
            else document.getElementById("wk" + w).innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'></td>" : "<td class='cal_spaces'></td>");
            dc++;
        }
        if (dc > dim) {
            if (w !== 6) {
                for (var i = 0; i < 7; i++)
                    document.getElementById("wk6").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
            }
            break;
        }
    }
    for (var i = 0; i < evntsInfo.evntsCount; i++) {
        var dtid = removeTimeFromDates(evntsInfo.evntsDates[i]);
        if (document.getElementById(dtid) != null)
            document.getElementById(dtid).innerHTML += "<a class='cal_actual_links' title='Submitted By: " + evntsInfo.evntsHosts[i] + "\nLocation: " + evntsInfo.evntsLocs[i] + "\nWhen: " + formatDate(evntsInfo.evntsDates[i]) + "\nTickets: " + evntsInfo.evntsTC[i] + "' href=/Home/viewTicketRequests?id=" + evntsInfo.evntsIDs[i] + ">" + evntsInfo.evntsTitles[i] + "</a>\n";
    }
    currentDayColoring();
    fixSizes();
}

    function currentDayColoring() {
        var cd = new Date();
        var dtid = (cd.getFullYear().toString() + "-" + parseM(cd.getMonth()).toString() + "-" + parseD(cd.getDate()).toString());
        if (document.getElementById(dtid) != null) {
            document.getElementById(dtid).parentElement.parentElement.style.backgroundColor = "#D7E4EA";
            document.getElementById(dtid).parentElement.firstChild.style.fontSize = "x-large";
        }
    }

    function fixSizes() {
        var mheight = 0;
        var spaces = document.getElementsByClassName("cal_spaces");
        for (var i = 0; i < spaces.length; i++) {
            if (spaces[i].offsetHeight > mheight)
                mheight = spaces[i].offsetHeight;
            console.log("mheight: " + mheight);
        }
        for (var i = 0; i < spaces.length; i++) {
            spaces[i].offsetHeight = mheight;
        }
    }

获取html表格单元格的渲染高度

0 个答案: