Dev Faq
0
votes

Retirez la tige de la table à l'intérieur de BlockQuote en retrait à la largeur complète du corps

J'essaie de résoudre un problème avec mon HTML + CSS pour supprimer le tiret d'une table qui se trouve à l'intérieur d'une balise BlockQuote. Il y a du texte après cette table, qui devrait être indenté, donc je ne peux pas prendre la table de la balise BlockQuote.

Toute suggestion? P>

C'est comme ça: P> actuellement c'est comme ça: p>

mais je voudrais retirer le tiret de table comme: p>

mais je voudrais supprimer Le tiret de la table comme p>

Voici mon code HTML généré (les utilisateurs de notre système utilisent TinyMCE pour générer des rapports, qui sont ensuite convertis en PDF): P>

p> 

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

9 commentaires

Il semble que vous travaillez dans un cadre CSS qui a probablement déjà ajouté des styles ajoutés à BlockQuote Numéroté-Contenu & mceettables _ Vous devez savoir si cela en est ainsi et remplacer ces styles dans votre propre fichier CSS utilisant "! IMPORTANT;" Assurer la priorité à votre nouveau style

Vous avez mentionné que vous ne pouvez pas sortir la table du blocus, mais pouvez-vous prendre les deux dernières lignes que vous voulez en retrait du blocus?

(Rien de tout cela ne semble être une citation réelle pour commencer, alors pourquoi est-ce dans un blockquote en premier lieu?)

@InputForColor Aucune des classes ne sont ajoutées à ce code, l'indent par défaut de HTML ou du navigateur ajouté.

@Alohci Même si le change à UL / Li, il sera comporter même

@MFARN - UL / LI serait tout aussi faux. Avez-vous entendu parler de marges CSS et de rembourrage? Votre indentation et votre solution requise peuvent être obtenues avec l'utilisation de ces deux propriétés.

@ALOHCI, mais mon code devrait en avoir un tel qu'il doit être numéroté et peut avoir des enfants imbriqués qui effectuera la numérotation de 8 -> 8.1 -> 8.1.1 etc ...

Les utilisateurs de mon système utilisent TinyMCE pour écrire des rapports et la numérotation est effectuée automatiquement.

@Misorude Il est à l'intérieur d'une balise de section et un petit code CSS comptez et ajoutez des chiffres au bloc de blocs et à ses enfants imbriqués (j'ai mis à jour le code). Nos utilisateurs TinyMCE Ajouter des matières / tables, tout fonctionne à partir d'une alignement de table + largeur.

3 Réponses :

0
votes

Il suffit de sortir le article code> à partir de blockquote code>.

p> 

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

4 commentaires

Merci de votre suggestion, mais cela supprimera également le tiret du texte qui est après cette table.

Dans ce cas, vous pouvez ajouter cela à BlockQuote. J'ai mis à jour la réponse s'il vous plaît vérifier.

Cela fonctionne comme si vous avez ajouté, mais cela changera également la numérotation. J'ai un petit code CSS qui fait la numérotation automatique: blockQuote.numbered-content :: avant {contre-incraction: section; Contenu: compteurs (section, ".") ""; }

Les utilisateurs de mon système utilisent TinyMCE pour ajouter du texte et la numérotation est effectuée automatiquement.

1
votes

Vous pouvez utiliser margin-gauche: (une valeur négative) code> sur la table code> à l'intérieur de l'article code> à l'intérieur du blockQuote Code>:

p> 

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

2 commentaires

Merci Peter. J'ai essayé ce CSS mais la table est sur 100% de largeur et elle n'élargra pas à droite, même si j'ajoute de la marge-droite: -44px. Je peux ajouter une certaine largeur à celle-ci, mais la marge et la largeur du CSS ne garderont pas la table alignée si les utilisateurs insérent une table à l'intérieur d'un enfant de 3e niveau. Nos utilisateurs TinyMCE Ajouter des matières / tables, tout fonctionne à partir d'une alignement de table + largeur.

Vous pouvez essayer d'ajouter largeur: auto dans le tableau BlockQuote Article Style. Il ne garantit pas que la table devient 100% de la largeur de la page, mais s'il y a suffisamment de contenu dans la table, cela le fera.

1
votes

Basé sur des suggestions, en particulier de Peter, la solution qui fonctionne pour moi est la suivante: 

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

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components