Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

html

css

html-table

i have a outer table with a fixed row height (in this example 24px). i want to nest a table to add some content but also want to mimic the row heights and borders inside. But there is a 1px difference as you can see here:

enter image description here

I cannot explain this, but have the feeling that is has something to do with the rowspan and maybe the nested table with flexboxes.

Question: I wonder that the innerTable has a expected height of 72px, but the parent td.itemblock has a height of 72.8px. Can someone tell me the reason for this difference? And is there some setting to prevent this?

* {
  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>

Update:

  • Its confirmed to happen in Mac Chrome and Safari, probably also in other browsers (check the result with Run Code Snippet)
  • it happens regardless if the browser zoom in/out is used or not.

With the proposals i was able to assemble this, which looks like it is working. The changes are:

  • use box-shadows instead of border-bottom
  • set inner table height
  • set height of Item div to calc(100% - 0.75px)

Though it seems i have a "hacky" solution, still i dont have an explanation for this! Any html table experts?

* {
  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 {
  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 {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

.itemCell {}

.item {
  height: calc(100% - 0.75px);
  background: lightblue;
  display: flex;
  background-color: lightblue;
  padding-left: 4px;
  padding-right: 4px;
}

.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>
like image 668
Hilmar Demant Avatar asked Nov 27 '20 14:11

Hilmar Demant

2 Answers

   

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>
like image 113
Aman Avatar answered Oct 20 '22 00:10

Aman

 

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>
like image 36
Rajkiran Shetty Avatar answered Oct 20 '22 00:10

Rajkiran Shetty
Sign in to Comment

Related questions

Trying to detect if any checked values contains a specific string [closed]
Can we exclude tsconfig.spec.json from an angular application
Bad rendering of the local index.html from public folder using HUGO
Can Firefox display JP2 images?
Perfectly vertical align top of fonts of 2 different text sizes using CSS
Flex box: Fill remaining space but justify content center
Counter for TinyMCE is not working as expected
How to use PHP to annotate an string with HTML (i.e How. insert HTML tags to an string by offsets mantaining a valid HTML)?
CSS filter brightness: can it be applied separately to border and body of one element?
Make HTML5 FileReader working with heic files
Navigate into layer using arrow key
Open Excel file url in excel (from source, not downloaded copy)
Change color of Sticky text when its active
Plain javascript trigger css fade out, ajax load content, fade in using CSS
How to hide video loading spinner in HTML5 video tag?
Connect Line Between 2 Elements - Javascript
Share content of a webpage to Instagram story
How to preload an SVG image properly?
document.scripts is not equal to document.getElementsByTagName("script")
How do I position the caret inside a span element that has no text inside of it yet?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!