Remove table indent inside indented blockquote to full body width

Question

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:

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.

It looks as though you're working inside a CSS framework that probably already has styles added to `blockquote` &/or classes `numbered-contents` & `mceEditable` _ You need to find out if this is so and override these styles in your own CSS file_ using "!important;" to ensure your new styling is prioritised — inputforcolor, Jul 29 '19 at 09:00
You mentioned you can't take the table out of the blockuote but can you take the last two line you want indented out of the blockuote? — SP de Wit, Jul 29 '19 at 09:00
(None of this appears to be an actual quote to begin with, so why is it in a blockquote in the first place?) — misorude, Jul 29 '19 at 09:06
@inputforcolor None of the classes are added any indent to this code, it HTML or browser's default indent added. — m farn, Jul 29 '19 at 09:12
@mfarn - UL/LI would be just as wrong. Have you heard of CSS margins and padding? Both your indentation and your required solution can be achieved with the use of those two properties. — Alohci, Jul 29 '19 at 09:17
@Alohci But my code should have one of these as it need to be numbered and can have nested children which will make numbering as 8 -> 8.1 -> 8.1.1 etc... — m farn, Jul 29 '19 at 09:31
Users in my system are using TinyMCE to write reports and numbering is done automatically — m farn, Jul 29 '19 at 09:40
@misorude It is inside a section tag, and a tiny CSS code count and add numbers to the blockquote and its nested children (i've updated the code). Our users TinyMCE add contents/tables, everything works aparts from table alignment+width. — m farn, Jul 29 '19 at 11:08

score 1 · Answer 1 · answered Jul 29 '19 at 10:03

You can use margin-left: (some negative value) on the table inside the article that is inside the blockquote:

blockquote.numbered-contents::before {
    counter-increment: section;
    content: counters(section, ".") " ";
}
blockquote {
    font-weight: bold;
}
article {
    font-weight: normal;
}

blockquote article table {
    margin-left: -44px;
}

<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>

What value you need to use will depend on whatever default margin or padding your browser is using for blockquote in its default stylesheet.
Results will be more predictable if you also define your own margin or padding for blockquote elements, and then use the negative sum of those values for the left margin of the table.

Thanks Peter. I did try this CSS but table is on 100% width and it will not expand on right-hand side even if I add margin-right: -44px. I can add some width to it but the CSS margin and width will not keep the table aligned if users insert a table inside a 3rd level child. Our users TinyMCE add contents/tables, everything works aparts from table alignment+width. — m farn, Jul 29 '19 at 10:19
You can try adding `width: auto` into the `blockquote article table` style. It does not guarantee that the table becomes 100% of page width, but if there is enough content in the table then it will. — Peter B, Jul 29 '19 at 11:04

score 1 · Accepted Answer · edited Jul 29 '19 at 14:03

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%;
}

Sumit Patel · Answer 3 · 2019-07-29T09:13:15.890

Just take out the article from blockquote.

<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:
        
    </blockquote>
  <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>
            
            <blockquote class="numbered-contents">Monthly report:
        <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>
    </blockquote>
    
            
        </article>
</section>
</blockquote>

Thanks for your suggestion but it will also remove indent of the text which is after this table. — m farn, Jul 29 '19 at 09:08
In that case you can add that in to blockquote. i have update the answer please check. — Sumit Patel, Jul 29 '19 at 09:13
it does work like you have added but it will change the numbering as well. I have small CSS code which does the auto numbering:blockquote.numbered-contents::before { counter-increment: section; content: counters(section, ".") " "; } — m farn, Jul 29 '19 at 09:38
Users in my system are using TinyMCE to add text and numbering is done automatically — m farn, Jul 29 '19 at 09:39

Remove table indent inside indented blockquote to full body width

3 Answers3