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

Question

我有一个包含 4 个子表的父表。当我在其中一个子表 td 周围添加一个粗边框(宽度为 5 像素)时，它会导致其他子表周围出现大空间。我尝试使用 border-spacing: 0 和 border-collapse: collapse 修复它，但没有用。

我有输出图像并提供了代码的 fiddle 链接。

当子表 2 和 3 的单元格没有添加边框时。

当对子表2和3的单元格应用边框时，它们与子表1之间有一个空格。

HTML代码:

    <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

使用下一个样式，我们可以定位到右下角 <td>并应用相同的边框但白色。这将使 table 适应空间。希望这就是您要找的。

#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>