Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trouble aligning children to bottom #1961

Open
resident0 opened this issue Jul 3, 2019 · 6 comments · May be fixed by #2762
Open

Trouble aligning children to bottom #1961

resident0 opened this issue Jul 3, 2019 · 6 comments · May be fixed by #2762
Labels
bug css layout
Milestone
3.1.0

Comments

@resident0
Copy link

I'm trying to display a bar graph using multi colored divs in a table. The problem is that table cell content doesn't align to the bottom of the cell.
HTML:
Notes:

  • There are no spaces in the cell content because white space is respected by inline elements.
  • .barContainer height is styled inline because it is configurable.
  • All other heights are calculated when the table is created.
  • margin-left on each .bar0 is styled inline because text-align: center appears to only affect text nodes (potentially a separate issue).
    This is calculated when the table is created.
    <table class="bargraph">
      <tr class="graphBody">
        <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
        <td class="space"></td>
        <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
        <td class="space"></td>
        <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
        <td class="space"></td>
        <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        <td class="space"></td>
        <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
      </tr>
    </table>

CSS:

@page {
  margin: 1rem 2rem;
  font-family: Garamond, serif;
}

table {
  border-collapse: collapse;
}

th {
  text-align: center;
}

.bargraph {
  margin: 1.25rem auto;
  page-break-after: always;
}

.graphBody {
  font-size: 1.2rem;
  background-color: #f4f4f4;
  /* overflow: hidden; */
}

.space {
  width: 0.25rem;
}

.barContainer {
  width: 5rem;
  padding: 0;
  background-color:#f4f4f4;
  border: 0.125rem solid #e1e1e1;
  border-bottom: none;
  border-top: none;
  /* vertical-align: bottom; */
}

.barContainer div {
  display: inline-block;
  width: 7%;
  /* vertical-align: bottom; */
}

.bar0 {
  background-color: #fe0000;
  display: inline-block;
}

.bar0Label {
  color: #fe0000;
}

.bar1 {
  background-color: #0071bd;
  display: inline-block;
}

.bar1Label {
  color: #0071bd;
}

.bar2 {
  background-color: #cf5300;
  display: inline-block;
}

.bar2Label {
  color: #cf5300;
}

.bar3 {
  background-color: #ba9907;
  display: inline-block;
}

.bar3Label {
  color: #ba9907;
}

.bar4 {
  background-color: #00ff01;
  display: inline-block;
}

.bar4Label {
  color: #00ff01;
}

.bar5 {
  background-color: #009345;
  display: inline-block;
}

.bar5Label {
  color: #009345;
}

.bar6 {
  background-color: #02066f;
  display: inline-block;
}

.bar6Label {
  color: #02066f;
}

The browser renders:

expected

dompdf renders:

NoValign

If vertical-align: bottom; is applied totds:

tdValign

if vertical-align: bottom; is applied to divs:

divValign

if vertical-align: bottom; is applied to tds and divs:

tdDivValign

if vertical-align: bottom; is not applied and margin-top is added, calculated not to exceed the height of .barContainer as suggested in issue #672 :

topMargin

I tried changing the table elements to divs and the alignment issue persisted.

If there's a workaround that I overlooked or haven't thought of I would appreciate some direction.

Thank you for taking the time to look this over.
@bsweeney
Copy link
Member

bsweeney commented Jul 9, 2019

There are definitely some vertical-alignment / line-height calculation issues we need to deal with. I was sort of able to get things to line up by specifying a height on the container

.barContainer div {
  display: inline-block;
  height: 12.5rem;
  width: 7%;
  vertical-align: bottom;
}

But it wasn't quite working. Maybe with a bit more work in that direction you could make it work?

@bsweeney bsweeney added this to the dompdf-next milestone Jul 9, 2019
@resident0
Copy link
Author

Thank you for taking a look. I'll keep tweaking the css.

@bsweeney
Copy link
Member

need to look at this in relation to #2762, which appears to render the bars at the top of the cell regardless of alignment

@bsweeney bsweeney modified the milestones: dompdf-next, 2.0.1 Jan 29, 2022
@bsweeney
Copy link
Member

Things are definitely improved in the upcoming release, though tables still present some problems. Attached is the output from a render with 1.1.0 and 1.2.0 using the following test HTML.

testing document 
<style>
	@page {
        size: letter landscape;
		margin: 0px;
		font-family: Garamond, serif;
	  }
      
	  table {
		border-collapse: collapse;
	  }
	  
	  th {
		text-align: center;
	  }
	  
	  .bargraph {
		margin: 0px auto;
	  }
	  
	  .graphBody {
		font-size: 1.2rem;
		background-color: #f4f4f4;
		/* overflow: hidden; */
	  }
	  
	  .space {
		width: 0.25rem;
	  }
	  
	  .barContainer {
		width: 5rem;
		padding: 0;
		background-color:#f4f4f4;
		border: 0.125rem solid #e1e1e1;
		border-bottom: none;
		border-top: none;
	  }
	  
	  .barContainer div {
		display: inline-block;
		width: 7%;
	  }
	  
	  .bar0 {
		background-color: #fe0000;
		display: inline-block;
	  }
	  
	  .bar0Label {
		color: #fe0000;
	  }
	  
	  .bar1 {
		background-color: #0071bd;
		display: inline-block;
	  }
	  
	  .bar1Label {
		color: #0071bd;
	  }
	  
	  .bar2 {
		background-color: #cf5300;
		display: inline-block;
	  }
	  
	  .bar2Label {
		color: #cf5300;
	  }
	  
	  .bar3 {
		background-color: #ba9907;
		display: inline-block;
	  }
	  
	  .bar3Label {
		color: #ba9907;
	  }
	  
	  .bar4 {
		background-color: #00ff01;
		display: inline-block;
	  }
	  
	  .bar4Label {
		color: #00ff01;
	  }
	  
	  .bar5 {
		background-color: #009345;
		display: inline-block;
	  }
	  
	  .bar5Label {
		color: #009345;
	  }
	  
	  .bar6 {
		background-color: #02066f;
		display: inline-block;
	  }
	  
	  .bar6Label {
		color: #02066f;
	  }
</style>


<style>
	.bargraph.baseline .barContainer {
		vertical-align: baseline;
	}
	  
	.bargraph.baseline2 .barContainer div {
		vertical-align: baseline;
	}

	.bargraph.bottom .barContainer {
		vertical-align: bottom;
	}
	  
	.bargraph.bottom2 .barContainer div {
		vertical-align: bottom;
	}

	.bargraph.middle .barContainer {
		vertical-align: middle;
	}
	  
	.bargraph.middle2 .barContainer div {
		vertical-align: middle;
	}

	.bargraph.top .barContainer {
		vertical-align: top;
	}
	  
	.bargraph.top .barContainer div {
		vertical-align: top;
	}
</style>

<table align="center" cellpadding="10"><tr><td>
    TD: baseline
    <table class="bargraph baseline">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td><td>
    TD: baseline / DIV: baseline
    <table class="bargraph baseline baseline2">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td></tr></table>

<table align="center" cellpadding="10"><tr><td>
    TD: bottom
    <table class="bargraph bottom">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td><td>
    TD: bottom / DIV: bottom
    <table class="bargraph bottom bottom2">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td></tr></table>

<table align="center" cellpadding="10"><tr><td>
    TD: middle
    <table class="bargraph middle">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td><td>
    TD: middle / DIV: middle
    <table class="bargraph middle middle2">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td></tr></table>

<table align="center" cellpadding="10"><tr><td>
    TD: top
    <table class="bargraph top">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td><td>
    TD: top / DIV: top
    <table class="bargraph top top2">
        <tr class="graphBody">
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145.20" style="height: 1.2305084745763rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$577.74" style="height: 4.8961016949153rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$109.12" style="height: 0.92474576271186rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$145" style="height: 1.228813559322rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$559" style="height: 4.7372881355932rem;"></div><div class="gap"></div><div class="bar2" title="$1,475" style="height: 12.5rem;"></div><div class="gap"></div><div class="bar3" title="$135" style="height: 1.1440677966102rem;"></div><div class="gap"></div><div class="bar4" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar5" title="$82" style="height: 0.69491525423729rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$18.72" style="height: 0.15864406779661rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$639.84" style="height: 5.4223728813559rem;"></div><div class="gap"></div><div class="bar5" title="$27.28" style="height: 0.23118644067797rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$528" style="height: 4.4745762711864rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
            <td class="space"></td>
            <td class="barContainer" style="height:12.5rem;"><div class="bar0" title="$0" style="height: 0rem; margin-left: 11.5%;"></div><div class="gap"></div><div class="bar1" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar2" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar3" title="$0" style="height: 0rem;"></div><div class="gap"></div><div class="bar4" title="$111.84" style="height: 0.94779661016949rem;"></div><div class="gap"></div><div class="bar5" title="$0" style="height: 0rem;"></div></td>
        </tr>
    </table>
</td></tr></table>

1.1.0.pdf
1.2.0.pdf

@kapitannwel
Copy link

wow, thank you, i was able to achieve vertical-align: middle! i wouldn't expect that the behavior of td on table tag would be vertical-align:middle by default. who would even guess that? thanks again!

@bsweeney bsweeney linked a pull request Aug 25, 2022 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@bsweeney bsweeney modified the milestones: 2.0.1, 2.0.2 Aug 25, 2022
@bsweeney bsweeney modified the milestones: 2.0.2, 2.0.3 Dec 29, 2022
@kw-pr
Copy link

kw-pr commented Apr 24, 2024

I tried the testing document with v2.0.7 and I feel like the problem got worse again.

v2.0.7.pdf

@bsweeney bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug css layout
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

Improve vertical alignment and related adjustments dompdf/dompdf
4 participants
@bsweeney @resident0 @kw-pr @kapitannwel