Table Row Containing Floats Do Not Float And Makes Row Height Incorrect

Skip to content Dismiss alert {{ message }} Kozea / WeasyPrint Public

• Uh oh!

  There was an error while loading. Please reload this page.

• Notifications You must be signed in to change notification settings
• Fork 788
• Star 8.7k

• Code
• Issues 143
• Pull requests 8
• Actions
• Security 2
• Insights

Additional navigation options

Table row containing floats do not float and makes row height incorrect #388New issueCopy linkNew issueCopy linkClosedClosedTable row containing floats do not float and makes row height incorrect#388Copy linkLabelsbugExisting features not working as expectedExisting features not working as expectedMilestonev0.33

Description

jeffgabhartopened on Nov 16, 2016Issue body actions

Here is a simplified example of the html I'm using. The floats inside the table are not respected and there is a lot of extra space between the rows. Maybe 2x the height of the divs when they are stacked.

<table> <colgroup> <col> </colgroup> <tbody> <tr> <td> <div style="float: left;">Value 1</div> <div style="float: left;">Value 2</div> <div style="float: left;">Value 3</div> </td> </tr> <tr> <td> <div style="float: left;">Value 1</div> <div style="float: left;">Value 2</div> <div style="float: left;">Value 3</div> </td> </tr> <tr> <td> <div style="float: left;">Value 1</div> <div style="float: left;">Value 2</div> <div style="float: left;">Value 3</div> </td> </tr> </tbody> </table>

Chrome output: Weasyprint output:

I can get these onto the same line using the following, but again the space between looks like the height of the divs if they were stacked.

<table> <colgroup> <col> </colgroup> <tbody> <tr> <td> <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div> <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div> <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div> </td> </tr> <tr> <td> <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div> <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div> <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div> </td> </tr> <tr> <td> <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div> <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div> <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div> </td> </tr> </tbody> </table>

Chrome output:

Weasyprint output:

Reactions are currently unavailable

Metadata

Metadata

Assignees

No one assigned

Labels

bugExisting features not working as expectedExisting features not working as expected

Type

No type

Projects

No projects

Milestone

• v0.33

Relationships

None yet

Development

No branches or pull requests

Issue actions

You can’t perform that action at this time.