csshtml-tableindentationblockquote

Remove table indent inside indented blockquote to full body width

I am trying to fix an issue with my HTML+CSS to remove indent of a table which is inside a blockquote tag. There is some text after this table as well which should be indented so I can't take the table out of blockquote tag.

Any suggestions?

Currently it is like this:

Currently it is like this:

But I would like to remove the indent of table Like:

But I would like to remove the indent of table Like

Here is my generated HTML code (users in our system are using TinyMCE to generate reports, which are then converted into PDF):

blockquote.numbered-contents::before {
    counter-increment: section;
    content: counters(section, ".") " ";
}
blockquote {
    font-weight: bold;
}
article {
    font-weight: normal;
}
<section>
  <blockquote class="numbered-contents" id="734">Health, safety and environment<article class="mceEditable">&nbsp;</article>
  <section class="mceNonEditable">
      <blockquote class="numbered-contents" data-parent_id="734" data-report_template_items_id="53" id="712">Monthly report:
          <article class="mceEditable">
              <table border="0" class=" tinymce-table-border-bw" width="100%">
                  <tbody>
                      <tr>
                          <td></td>
                          <td>Mngmnt</td>
                          <td>M&amp;E</td>
                          <td>Labour</td>
                          <td>Carpenters</td>
                          <td>S/C</td>
                          <td>Total</td>
                      </tr>
                      <tr>
                          <td>Average number of personnel on site</td>
                          <td>1</td>
                          <td>6</td>
                          <td>2</td>
                          <td>5</td>
                          <td>4</td>
                          <td>18</td>
                      </tr>
                      <tr>

                          <td>Reportable incidents</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                      </tr>
                      <tr>
                          <td>Lost time incidents</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                      </tr>
                      <tr>
                          <td>Minor NLT incidents</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                      </tr>
                      <tr>
                          <td>Near Miss</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                      </tr>
                  </tbody>
              </table>
              <div>&nbsp;</div>
              <div>Number of Tool Box Talks in the month: 2</div>
              <div>&nbsp;</div>
              <div>H&amp;S Inspections: 1</div>
              <div>&nbsp;</div>
          </article>
      </blockquote>
  </section>
  </blockquote>
</section>

Thanks.

Solution

  • Based on suggestions, especially from Peter, the solution which is working for me is:

    blockquote {
    margin-right: 0;
    margin-left: 40px;
    width: 100%;
}

main section blockquote section blockquote article.mceEditable table {
    margin-left: -40px !important;
}

main section blockquote section blockquote section blockquote 
article.mceEditable table {
    margin-left: -80px !important;
}

main>section>blockquote{
    display: table;
    width: 100%;
}