Repository: Kozea/WeasyPrint

Issue:
Margin is not applied to running tables 
I wanted to generate a sign box to be in every page. I tried this code because it worked with images and text, but is not working with tables.
This is the code:
```
    <style>
      @page {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 1.25cm;
        @bottom-left {
          content: element(secondFooter);
        }
      }
      #Footer {
        position: running(secondFooter);
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div style="width: 210mm; height: 297mm; position: relative">

      <div
        id="Footer"
        style="position: absolute; bottom: 0; width: 100%; height: 1.25cm"
      >
        <table style="border-collapse: collapse; vertical-align: middle; overflow: visible; border-style: solid; border-color: rgba(0, 0, 0, 0.1); width: 4.75cm; margin-left: 15cm">
          <thead style="display: table-header-group;">
            <td>
              <p style="text-align: center; font-size: 8pt">
                <span> Sign </span>
              </p>
            </td>
          </thead style="display: table-header-group;">
        </table>
      </div>

    </div>
  </body>

```
It should be repeating the following image in every page:
![image](https://github.com/Kozea/WeasyPrint/assets/146701483/af50d2b4-2a08-4478-92f7-9eb00c897bd9)

But the except for the first page, the rest of the pages it looks like this:
![image](https://github.com/Kozea/WeasyPrint/assets/146701483/5502aeaa-0c84-46d3-929f-1c68d938e38f)


Discussion:
Hi!

Thanks for reporting this issue. Is the problem that borders are not drawn? If it’s the case, that’s actually a duplicate of #1278.
Maybe with the issue belong with the borders, but not with the problem of the margin left.

The first page has the element in the right side, while the other is in the left side.

Thanks in advance!
> Maybe with the issue belong with the borders, but not with the problem of the margin left.

Oh, that’s strange.
Update:
I tried another way, with ```border```, ```padding``` and  ```<p>```, to recreate the sign box.

So, I applied in both styles (```content```, ```#Footer```), different background-colors, but it doesn't applied to the PDF.

Here's the code:

```
    <style type="text/css" media="print">
      @page :first {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 2cm;
      }
      @page {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 2cm;
        @top-left {
          content: element(encabezado);
        }
        @bottom-left {
          background-color: saddlebrown;
          content: element(secondFooter);
        }
      }
      #Footer {
        position: running(secondFooter);
        background-color: aqua;
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div style="width: 210mm; height: 297mm; position: relative">

      <div
        id="Footer"
        style="position: absolute; bottom: 0; width: 100%; height: 1.25cm"
      >
        <p
          style="
            text-align: center;
            margin-left: 150mm;
            position: absolute;
            bottom: 0;
          "
        >
          <span
            style="
              background-color: lime;
              font-size: 8pt;
              border-color: rgba(0, 0, 0, 1);
              border-style: solid;
              padding-top: 2.5mm;
              padding-bottom: 2.5mm;
              padding-left: 20mm;
              padding-right: 20mm;
              display: inline-block;
            "
          >
            Sign
          </span>
        </p>
      </div>

    </div>
  </body>
```

This is the result in all pages:

![image](https://github.com/Kozea/WeasyPrint/assets/146701483/79c12bee-45af-4932-bcf0-127fb9230168)

The bug is produced if ```position: absolute``` is in the style of the ```<p>```.

Idk why that is producing the bug of the background-color
There are 3 different problems:
- missing borders, that’s https://github.com/Kozea/WeasyPrint/issues/1278
- missing margin on the table (let’s talk about this in this issues)
- missing background color on `p`

I think that the third problem is not a bug in WeasyPrint. If your `p` is absolute, then `#Footer` doesn’t have any in-flow child, and thus its size it 0×0. That’s why you don’t get the background color. That’s exactly like:

`<div style="background: red; position: relative"><p style="position: absolute">abc</p></div>`

I’ve renamed the issue to focus on the second problem.
Okey,
I think is better for you or ```Weasyprint``` developers.


If I find something I will comment.
Maybe occur in all elements in the footer.
I tried the following code:
```
    <style type="text/css" media="print">
      @page {
        margin-top: 2cm; /* Espacio para el encabezado */
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 1.25cm; /* Espacio para el pie de página */
        @top-left {
          content: element(encabezado);
        }
        @bottom-left {
          content: element(footer);
          background-color: antiquewhite;
        }
      }
      #feet {
        position: running(footer);
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div
      id="Father"
      style="width: 210mm; height: 297mm; position: relative; overflow: hidden"
    >
      <footer
        id="feet"
        style="position: absolute; width: 100%; height: 1.25cm; bottom: 0; background-color: aqua;"
      >
        <p style="margin-left: 30mm; margin-top: 2mm;">
          <span style="font-size: 8pt;"> Sign </span>
        </p>
      </footer>
    </div>
  </body>
```


The first page is showing the following way:
![image](https://github.com/Kozea/WeasyPrint/assets/146701483/e57d9ff3-d1d5-4f5c-913d-e26ee4b45e88)

The following pages:

![image](https://github.com/Kozea/WeasyPrint/assets/146701483/59f2cce8-d72e-4bad-97b2-e228c27bcdda)




Patch:
diff --git a/weasyprint/formatting_structure/build.py b/weasyprint/formatting_structure/build.py
index 2156d3d7b..0cc4507fd 100644
--- a/weasyprint/formatting_structure/build.py
+++ b/weasyprint/formatting_structure/build.py
@@ -970,6 +970,7 @@ def wrap_table(box, children):
         grid_height += len(group.children)
 
     table = box.copy_with_children(row_groups)
+    table.style = table.style.copy()
     table.column_groups = tuple(column_groups)
     if table.style['border_collapse'] == 'collapse':
         table.collapsed_border_grid = collapse_table_borders(


Test patch:
diff --git a/tests/draw/test_table.py b/tests/draw/test_table.py
index 6015ee202..ad95d6da5 100644
--- a/tests/draw/test_table.py
+++ b/tests/draw/test_table.py
@@ -1473,7 +1473,6 @@ def test_running_elements_table_border_collapse_span(assert_pixels):
     ''')
 
 
-@pytest.mark.xfail
 @assert_no_logs
 def test_running_elements_table_border_collapse_margin(assert_pixels):
     assert_pixels(2 * '''