Dev Faq
0
votes

Table HTML sans bords

<table style="border-collapse: collapse; background-color: #000; width: calc(100% + 40px); margin-left: -10px; margin-right: -10px">
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>     
    </td>
    </tr>
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>
    </td>
    </tr>
    </table>
    <hr>

1 commentaires

Bienvenue à! Vous ajoutez essentiellement 40px à l'espace de largeur de 100%, ce qui le fait défiler 40px après la largeur maximale, supprimez simplement le +40

3 Réponses :

0
votes

Si vous supprimez le + 40px, il est ok

p> 

<table style="border-collapse: collapse; background-color: #000; width: calc(100%); margin-left: -10px; margin-right: -10px">
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>     
    </td>
    </tr>
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>
    </td>
    </tr>
    </table>
    <hr>

3 commentaires

Mais alors j'ai un bord à droite de la table. C'est ce que j'aimerais éviter. Mais d'une manière ou d'une autre, elle a fonctionné en définissant le 40px à 18px.

D'accord, vous pouvez peut-être le supprimer en éliminant le rembourrage en CSS. Parce que je n'ai pas raison de mettre plus de 100% parce que tous les ordinateurs n'ont pas la même taille

Oui tu as raison. Cela pourrait être le meilleur moyen de le faire pour accomplir le même affichage sur tous les appareils. Une idée de la façon de le faire?

0
votes

De cette façon, cela fonctionne d'une manière ou d'une autre.

p> 

<body>
    <table style="border-collapse: collapse; background-color: #000; width: calc(100% + 18px); margin-left: -10px; margin-right: -10px">
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>     
    </td>
    </tr>
    <tr>
    <td>
    <p style="color: white">Test 1</p>
    </td>
    <td>
    <p style="color: white">Test 2</p>
    </td>
    <td>
    <p style="color: white">Test 3</p>
    </td>
    </tr>
    </table>

0 commentaires
1
votes

Les réponses précédentes ont raison. Si vous modifiez la largeur de la table à Largeur: 100% , la table ne dépasse pas la fenêtre du navigateur.

Affichage de votre code et votre commentaire à propos de la non voulable à afficher le "Edge" à droite de la table, je suppose que votre objectif d'origine est d'adapter la table à la largeur du navigateur? Pour accomplir cela, je regarderais dans zéro-ing sur la marge du du pour vous débarrasser de sa marge par défaut. Vous pouvez voir comment cela est accompli ici: https://jsfiddle.net/url2nwem/

Voici également un article des astuces CSS adressant un débordement inattendu du corps qui peut vous aider à empêcher cette question à l'avenir: https://css -tricks.com/findingfixing-unintended-bodyflow/

8 commentaires

C'est exactement ce que je cherche. Merci!

Heureux de vous aider! N'hésitez pas à marquer cela comme réponse acceptée si c'est ce que vous alliez. Joyeux codage!

J'attends la signalement en raison de la raison pour laquelle si je nulle la marge du corps, le contenu suivant perd également sa marge. Essayez si cela fonctionne ou non concernant le contenu suivant.

Cela passe ensuite dans une discussion sur la structure de votre HTML dans des conteneurs distincts. Si vous souhaitez que certains contenus étendent la largeur du navigateur complet, mais que d'autres contenus ont une marge, vous pouvez appliquer un style à un élément ultérieur de

ou
qui vous donne l'espacement dont vous avez besoin: jsfiddle.net/tlf08dkr

Oui, c'est ce que je veux faire mais là-bas, il est aussi délicat. La table principale doit étendre la largeur complète du navigateur alors que la ou les tableaux internes doivent contenir sa marge standard. Il suffit de mettre la table dans un div et de définir la marge sur 0PX ne fonctionnera pas.

Vous devrez cibler les éléments dans pour avoir la marge. Même sans zéro dans le corps, en fonction des éléments que vous utilisez dans une cellule de table, ils n'auront aucune marge appliquée. Donc, dans votre cas, vous devez cibler spécifiquement les balises

et leur donner une valeur de marge. Si cela ne vous dérange pas que je demande, quelle est votre expérience actuelle avec HTML et CSS?

Juste pour répondre rapidement à votre question sur mon expérience actuelle: je l'ai récemment appris moi-même, alors je suis une recrue que je ne peux pas le nier.

J'ai lu l'article que vous avez lié et recherché d'autres solutions possibles. Cependant, cela devient au cœur de ce que je veux avoir CSS-Tricks.com / Navigateur complet-largeur-barres , bien que tout s'applique à une table ou à ses balises internes ne fonctionne pas.

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor