删除缩进块引用内的 table 缩进到整个正文宽度

Question

我正在尝试解决我的 HTML+CSS 的问题，以删除 blockquote 标记内的 table 的缩进。在这个 table 之后还有一些文本应该缩进，所以我不能把 table 从 blockquote 标签中去掉。

有什么建议吗？

目前是这样的：

但我想删除 table 的缩进 Like:

这是我生成的 HTML 代码（我们系统中的用户正在使用 TinyMCE 生成报告，然后将其转换为 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>

谢谢。

Answer 1

只需从blockquote中取出article即可。

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

Answer 2

您可以在 blockquote 内的 article 内的 table 上使用 margin-left: (some negative value)：

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>

您需要使用什么值将取决于您的浏览器在其默认样式表[=]中为 blockquote 使用的默认边距或填充33=]。
如果您还为 blockquote 元素定义自己的边距或填充，然后将这些值的负和用于 table.

的左边距，结果将更易于预测

Answer 3

根据建议，尤其是来自 Peter 的建议，对我有用的解决方案是：

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

删除缩进块引用内的 table 缩进到整个正文宽度

Remove table indent inside indented blockquote to full body width

css

html-table

indentation

blockquote