在 td 上添加粗边框会在嵌套表上增加额外的空间

Question

I have a parent table having 4 child tables. When I add a thick border (width of 5px) around one of the child table td, it results in big space around other child tables. I have tried fixing it using border-spacing: 0 and border-collapse: collapse but did not work.

I have image of the output and provided fiddle link for the code.

When no border added to the cells of child table 2 and 3.

When border is applied to cells of child table 2 and 3, there is a space between them and child table 1.

HTML Code:

    <div id="cont" dir="ltr">

  <table cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td valign="top">
          <table cellspacing="0" cellpadding="0">
            <tbody id="empty"></tbody>
          </table>
        </td>
        <td valign="top">
          <div id="fixedrow">
            <table id="colhdr" cellspacing="0" cellpadding="0">
              <tbody id="chd">
              </tbody>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <div id="firstcol">
            <table id="rowhdr" cellspacing="0" cellpadding="0">
              <tbody id="rhd"></tbody>
            </table>
          </div>
        </td>
        <td valign="top">
          <div class="scroller" onscroll="fnScroll()">
            <table cellspacing="0" cellpadding="0">
              <tbody id="gbody"></tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

</div>

Fiddle Link

Answer 1

with the next styles, we can target the bottom right <td> and apply the same border but white. This will make the table adjust to the space. Hope this is what you were looking for.

#empty tr + tr td + td {
border: 5px white solid;
}

 var rows = 0, cols = 0, cDim = 1 + 1, rDim = 1 + 1; var button = document.getElementById('create'); button.addEventListener("click", initGrid); function initGrid() { rows = 100; // $('#rows').val(); cols = 100; //$('#cols').val(); $('#empty, #rhd, #chd, #gbody').empty(); createEmptyCells(); createRowHdr(); createColHdr(); createGrid(); } //Create Empty Cells function createEmptyCells() { for (var i = 0; i < cDim; i++) { var row = "<tr>", col = ""; for (var j = 0; j < rDim; j++) { if (i == 0 && j == 0) { col += "<td class='gec'></td>"; } else if (i == 0) { col += "<td class='gcc gch'></td>"; } else if (j == 0) { col += "<td class='gcc grh'></td>"; } else { col += "<td class='gcc'></td>"; } } row += col + "</tr>"; $('#empty').append(row); } } //Create Row Header Cells function createRowHdr() { for (var r = 0; r < rows; r++) { var row = "<tr>", col = ""; for (var c = 0; c < rDim; c++) { if (c == 0) { col += "<td id='grh" + (r+1) + "' class='sel fcol grh rh" + (r+1) + "' onclick='rowselected(this)'>" + (r + 1) + "</td>"; } else { var selector = " r" + (r+1) + "'"; col += "<td class='sel rdim rdim" + r.toString() + c.toString() + selector + ">Row Dim</td>"; } } row += col + "</tr>"; $('#rhd').append(row); } } //Create Col Header Cells function createColHdr() { for (var r = 0; r < cDim; r++) { var row = "<tr>", col = ""; for (var c = 0; c < cols; c++) { if (r == 0) { col += "<td id='gch" + c + "' class='sel frow gch ch" + c + "' onclick='colselected(this)'>" + numToAlpha(c) + "</td>"; } else { var selector = " c" + c + "'"; col += "<td class='sel cdim cdim" + r.toString() + c.toString() + selector + ">Col Dim</td>"; } } row += col + "</tr>"; $('#chd').append(row); } } //Get Number to Alphabet function numToAlpha(i) { return (i >= 26 ? numToAlpha((i / 26 >> 0) - 1) : '') + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' [i % 26]; } //Create Grid Data function createGrid() { for (var r = 0; r < rows; r++) { var row = "<tr>", col = ""; for (var c = 0; c < cols; c++) { /*if (r == 0 && c == 0) { col += "<td class='cc'></td>"; } else if (r == 0 && c != 0) { col += "<td class='cdim'>Col Dim</td>"; } else if (r != 0 && c == 0) { col += "<td class='rdim'>Row Dim</td>"; } else { */ var indx = (r+1).toString() + c.toString(); var id = "r" + (r+1) + "c" + c; var selector = " r" + (r+1) + " c" + c + "' "; var dataAttr = "data-row=" + (r+1) +" data-col=" + c; col += "<td id=" + id + " class='sel cell c" + indx + selector + "onclick='selected(this)'" + dataAttr +"> # </td>"; //} } row += col + "</tr>"; $('#gbody').append(row); } // createColDim(); // createRowDim(); // createGridData(); } /*//Create Grid Col Dim Cells function createColDim() { for (var col = 1; col <= cols; col++) { $('#cdim').append("<td class='cdim'>Col Dim</td>"); } } //Create Grid Row Dim Cells function createRowDim() { for (var row = 1; row <= rows; row++) { $('#rdim').append("<tr><td class='rdim'>Row Dim</td></tr>"); } } //Create Grid Data Cells function createGridData() { var row = "", col = ""; for (var row = 1; row <= rows; row++) { row = "<tr>"; for (var col = 1; col <= cols; col++) { col += "<td id=gcc'" + row + col + "' class='cell gcc" + row + col + "'>#</td>"; } row += col + "</tr>"; $('#gbody').append(row); } } */ window.fnScroll = function() { var left = $('.scroller').scrollLeft(); var top = $('.scroller').scrollTop(); $('#fixedrow, .cdim').scrollLeft(left); $('#firstcol, .rdim').scrollTop(top); } //Change selected cells background window.selected = function(obj) { var row = obj.getAttribute('data-row'); var col = obj.getAttribute('data-col'); removeClass(); //Make the rhdr, chdr, cell bg-color change $(obj).addClass('cell-selected'); $(".rh" + row).addClass('hdr-selected'); $(".ch" + col).addClass('hdr-selected'); //or create 3 global variables to hold the id of selected rowhdr, colhdr and cell //and find them using find() and remove class selected using find().removeClass(). } //Change the complete row background color window.rowselected = function(obj) { var rownum = obj.id.slice(3); removeClass(); $('.r'+rownum).addClass('row-selected'); $('.rh'+rownum).addClass('row-selected'); } //Change the complete col background color window.colselected = function(obj) { var colnum = obj.id.slice(3); removeClass(); $('.c'+colnum).addClass('col-selected'); $('.ch'+colnum).addClass('col-selected'); } function removeClass() { $('.sel').removeClass('col-selected'); $('.sel').removeClass('row-selected'); $('.sel').removeClass('cell-selected'); $('.sel').removeClass('hdr-selected'); }

 #cont { width: auto; position: absolute; left: 0; } #fixedrow { overflow: hidden; width: 311px; } #firstcol { overflow: hidden; height: 175px; } #colhdr th, #gbody td { min-width: 70px; height: 25px; } .scroller { overflow: scroll; height: 192px; width: 328px; position: relative; } .fcol, .frow, .cdim, .rdim { text-align: center; vertical-align: bottom; height: 25px; min-width: 70px; } .gcc, .gec { width: 70px; height: 25px; } .cdim, .rdim { text-align: center !important; vertical-align: middle; border: 5px solid red !important; } .cell { text-align: right; } .gec { background: #ECF0F2; height: 70px; } .gch { height: 70px; } .gch, .grh { background-color: #678092; } .frow, .fcol, .cell, .gcc, .cdim, .rdim { border-width: 0 1px 1px 0; border-style: solid; border-color: silver; } .cell-selected, .row-selected, .col-selected { background-color: #e4f0fa; } .hdr-selected { background-color: #4B5B74; } #empty tr + tr td + td { border: 5px white solid; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Rows: <input type="text" id="rows" style="width:50px;" /> Cols: <input type="text" id="cols" style="width:50px;" /> <button id="create" type="button">Create Grid</button> <br/> <br/> <div id="cont" dir="ltr"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"> <table cellspacing="0" cellpadding="0" id='first-table'> <tbody id="empty"></tbody> </table> </td> <td valign="top"> <div id="fixedrow"> <table id="colhdr" cellspacing="0" cellpadding="0"> <tbody id="chd"> </tbody> </table> </div> </td> </tr> <tr> <td valign="top"> <div id="firstcol"> <table id="rowhdr" cellspacing="0" cellpadding="0"> <tbody id="rhd"></tbody> </table> </div> </td> <td valign="top"> <div class="scroller" onscroll="fnScroll()"> <table cellspacing="0" cellpadding="0"> <tbody id="gbody"></tbody> </table> </div> </td> </tr> </tbody> </table> </div>