TD with rowspan has more height than content (nested table): 1px diff in border placement of nested tables mimic the same row height of outer table

   

table {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: fixed;
  width: 100%;
  font-size: 10px;
}

tr {
  height: 24px;
}



td {

 box-shadow: 3px -3.5px 0px -3px rgba(0,0,0,1) inset;
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
}

.firstColumn {
  width: 24px;
  border-right: 1px solid black;
}

td.small {
  width: 12px;
  border-right: 1px solid black;
}

.title {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 24px;
}

.innerTable td {
  border-bottom: 0;
  border-right: 0;
  width: auto;
}
td.itemCell {
    background: lightblue;
}
.itemCell {
  position: relative;
}

.innerTable td.blockCell {
box-shadow: 3px -3.5px 0px -3px rgba(0,0,0,1) inset;
}
<html>

<head>
</head>

<body>

  <table class="outerTable">
    <tr>
      <td rowspan="2" class="firstColumn">0</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td rowspan="3" class="itemBlock">

        <table class="innerTable">
          <tr>
            <td rowspan="3" class="itemCell">
              <div class="item">
                <div class="title">some content</div>
              </div>
            </td>
            <td class="blockCell"></td>
          </tr>
          <tr>
            <td class="itemCell blockCell">
             <div class="item">
                <div class="title">other content</div>
             </div>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
        </table>


      </td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">1</td>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">2</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>

    </tr>

  </table>
</body>
<html>


table {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: fixed;
  width: 100%;
  font-size: 10px;
}

tr {
  height: 24px;
}



td {

 box-shadow: 3px -3.5px 0px -3px rgba(0,0,0,1) inset;
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
}

.firstColumn {
  width: 24px;
  border-right: 1px solid black;
}

td.small {
  width: 12px;
  border-right: 1px solid black;
}

.title {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 24px;
}

.item {
  display: flex;
  background-color: lightblue;
  padding-left: 4px;
  padding-right: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 1px;
}

.innerTable td {
  border-bottom: 0;
  border-right: 0;
  width: auto;
}

.itemCell {
  position: relative;
}

.innerTable td.blockCell {
box-shadow: 3px -3.5px 0px -3px rgba(0,0,0,1) inset;
}
<html>

<head>
</head>

<body>

  <table class="outerTable">
    <tr>
      <td rowspan="2" class="firstColumn">0</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td rowspan="3" class="itemBlock">

        <table class="innerTable">
          <tr>
            <td rowspan="3" class="itemCell">
              <div class="item">
                <div class="title">some content</div>
              </div>
            </td>
            <td class="blockCell"></td>
          </tr>
          <tr>
            <td class="itemCell blockCell">
             <div class="item">
                <div class="title">other content</div>
             </div>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
        </table>


      </td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">1</td>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">2</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>

    </tr>

  </table>
</body>
<html>


1. Cause

Using box-sizing:border-box is relevant only for the parent cell who has the border - but the nested table doesn't care about it's parent's border, only about its own.

In a plain table the border of the cells is part of the cell and thus considered in the computation of the cell heights:

<tr>
<td></td>
<td></td>
</tr>

In the case of a nested table, the border belongs to the cell that contains the table, and thus is not available for computing the height of the cell:

<tr>
<td rowspan="2">
  <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
  </table>
</td>
</tr>

2. Solution

Finding the solution is harder than determining the cause.

My idea is to

    .innerTable{
  1. use the margin to stretch the inner table to cover the border of the containing cell:
      margin-top: -1px;
      margin-bottom: -1px;
  1. then draw the border on the inner table so it looks again like the containing cell had a border:
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }

Setting only margin-bottom (or even worse, setting margin-bottom:-2px) doesn't help - border-collapse: collapse; means that two cells share their border, but it doesn't change that they end up having borders on both sides, so the size of both borders needs to be counted.

.innerTable{
  margin-top: -1px;
  margin-bottom: -1px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

table {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: fixed;
  width: 100%;
  font-size: 10px;
  border-spacing: 0;
}

tr {
  height: 24px;
}

td {
  border-bottom: 1px solid black;
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
}

.firstColumn {
  width: 24px;
  border-right: 1px solid black;
}

td.small {
  width: 12px;
  border-right: 1px solid black;
}

.title {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 24px;
}

.item {
  display: flex;
  background-color: lightblue;
  padding-left: 4px;
  padding-right: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 1px;
  height: 100%;
}

.innerTable td {
  border-bottom: 0;
  border-right: 0;
  width: auto;
}

.itemCell {
  position: relative;
}

.innerTable td.blockCell {
  border-bottom: 1px solid black;
}
<html>

<head>
</head>

<body>

  <table class="outerTable">
    <tr>
      <td rowspan="2" class="firstColumn">0</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td rowspan="3" class="itemBlock">

        <table class="innerTable">
          <tr>
            <td rowspan="3" class="itemCell">
              <div class="item">
                <div class="title">some content</div>
              </div>
            </td>
            <td class="blockCell"></td>
          </tr>
          <tr>
            <td class="itemCell blockCell">
              <div class="item">
                <div class="title">other content</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
        </table>


      </td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">1</td>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td rowspan="2" class="firstColumn">2</td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
    </tr>
    <tr>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>
      <td></td>
      <td class="small"></td>

    </tr>

  </table>
</body>
<html>

Tags:

Html

Css

Html Table

Related

Android studio updated and code too large now How to wrap @Column annotation with my own annotation in Java or Kotlin Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state? Xamarin, how to generate constants for images file names in the project? System.Text.Json Field Serialization in .NET 5 not shown in Swashbuckle API Definition Google OR-Tools TSP spanning multiple days with start/stop times Passing a std::shared_ptr<T> to a function that takes a std::shared_ptr<const T>? Why does !! (bang-bang) combined with as.name() give a different output compared to !! or as.name() alone? How to get bearer token from header of a request in java spring boot? How to sum even and odd values with one for-loop and no if-condition? Why can't None be cloned for a generic Option<T> when T doesn't implement Clone? How can you write an algorithm to properly fill a circle using lines from the center?

Recent Posts