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

Có thể bạn quan tâm

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: