web-dev-qa-db-fra.com

Comment formater un tableau html avec des styles en ligne pour ressembler à un tableau Excel rendu?

Je suis actuellement bloqué en définissant des bordures dans une table html. (J'utilise des styles en ligne pour un meilleur rendu dans les clients de messagerie) J'ai ce morceau de code:

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>

Il est rendu comme ceci: alt text

Je veux que le tableau soit rendu comme Excel le rendrait avec un bord intérieur et extérieur: alt text

htmlcssborderhtml-table
16
citronas
table {
  border-collapse:collapse;
}
29
Stephan Muller

Ajoutez le rembourrage cellulaire et l'espacement des cellules pour le résoudre. Modifier: Suppression de la bordure à double pixel également supprimée.

<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="350" >
                    Foo
                </td>
                <td width="80" >
                    Foo1
                </td>
                <td width="65" >
                    Foo2
                </td>
            </tr>
            <tr>
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
            <tr >
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>
9
Ralf de Kleine

C'est rapide et sale (et non formellement HTML5 valide), mais cela semble fonctionner - et c'est en ligne selon la question:

<table border='1' style='border-collapse:collapse'>

Aucun autre style de <tr>/<td> les balises sont obligatoires (pour une grille de table de base).

5
nobar