le style a <thead>

J'ai le texte suivant :

<table style="border:solid 1px; border-color:black">
  <thead style="border:solid 2px; border-color:black"> 
    <tr>
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C01753</p>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C00522</p>
      </td>
    </tr>
  </tbody>
</table>

Je voudrais ajouter une bordure autour de l'ensemble de la table et l'un autour de l'ensemble de l'en-tête. La bordure du tableau montre bien (Internet Explorer), mais l'en-tête de la frontière n'est pas.

PS: j'utilise des styles en ligne parce qu'il est destiné pour un corps HTML dans un message électronique.

MODIFIER

La suite m'a donné ce que je voulais dans Firefox, pas sous IE mais

<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr style="border: 1px solid black">
    ...

MODIFIER

Coloration

<table style="border: 2px solid black; border-collapse: collapse;">
  <thead>
    <tr style="border: 1px solid black; background-color: #EEE;">
    ...

C'est un double de la stackoverflow.com/questions/1396317/..., mais je dois admettre d'être réticent à le marquer comme tel, puisque la question n'a pas vraiment répondu.
Crowder: Ouais, constaté que l'un de trop, mais à l'aide de javascript n'est pas vraiment la réponse.

OriginalL'auteur Vincent Vancalbergh | 2011-03-21

css html

Utilisation rules="groups" et de changer votre structure un peu:

<table style="border: 1px solid black; border-collapse: collapse;" rules="groups">
  <thead style="border: 2px solid black;"> 
    <tr>
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C01753</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C00522</p>
      </td>
    </tr>
  </tbody>
</table>

MODIFIER: eh Bien, qui ne semblent travailler dans IE. Dans ce cas, je vous suggère de:

<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr style="background-color: black; color: white;">
      <!-- ... -->

+1, semble fonctionner: jsbin.com/urubi5 Rend tout à fait différemment dans IE7 par rapport à Chrome ou IE9, mais quand même... Re votre edit: Il a travaillé pour moi dans les deux IE7 et IE9. Dans IE7 le soulignement sous le thead est très faible, mais il est là.
oui, tout à fait différemment 😀 Encore, personnellement, je préfère utiliser le plus tard solution avec la couleur d'arrière-plan.
Désolé, cela a fonctionné... dans Firefox. MSIE me donne le doigt. 🙁 C'est pas de bordure autour de l'en-tête. Encore, conforme aux normes réponse est assez bon. Combiné avec balexandre de la coloration, j'ai obtenu quelque chose que je peux utiliser.

OriginalL'auteur Czechnology

6

Vous ne pouvez pas le style d'un <thead> élément, vous avez besoin pour le style de la <tr>

par exemple, comme cette
```
<table style="border:solid 1px black" cellpadding="0" cellspacing="0">
  <thead> 
    <tr style="background-color: #EEE;">
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
...
```
frontière style ne s'applique pas, la chose normale est d'utiliser la couleur d'arrière-plan.

et btw border prend en charge 3 attributs, y compris la couleur en tant que bien comme
```
border: solid 1px black;
```
Merci pour le conseil sur l'utilisation d'arrière-plan, il n'a pas l'air plus sympa

OriginalL'auteur balexandre

Vous ne pouvez pas le style thead directement, mais vous pouvez le style de l'enfant-éléments.

Par exemple

<table>
  <thead> 
    <tr>
      <th>
        <p>Document Date</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <p>18/03/11</p>
      </th>
    </tr>
  </tbody>

Si vous voulez style que les th de la thead, alors votre css est

thead th { mystyles }

JSFiddle

OriginalL'auteur Dave

0

Essayer de mettre du style sur votre <tr> plutôt que <thead>.

Aussi, vous pouvez raccourcir le css comme ceci: style="border: 2px solid black"

Style de la <tr> ne fait rien

OriginalL'auteur Ant
0

Je ne pense pas que thead rend et est plus pour l'organisation. Le Style de la ligne. Mise à JOUR: tr ne prend pas en charge la frontière. Version de mise à jour ci-dessous.

MODIFIER
```
<table style="border:solid 1px; border-color:black;border-collapse:collapse;">
<thead>
    <tr>
      <th style="border:solid 2px black;border-right:none">
        <p>Document Date</p>
      </th>
      <th style="border:solid 2px black;border-left:none">
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C01753</p>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C00522</p>
      </td>
    </tr>
  </tbody>
</table>
```
La frontière peut être spécifié sur un tableau ou d'une cellule (td ou th). Spécifier une bordure supérieure et inférieure sur toutes les cellules, une bordure gauche sur la première cellule, et une bordure de droite sur la dernière cellule. Pour éviter les écarts entre les frontières de cellules de la border-collapse style de la table doit être mis à border-collapse:collapse.

Style de la <tr> ne fait rien
J'étais sûr que je l'ai utilisé qu'avant, le code de mise à jour (et testé).
Vraiment, je ne voudrais pas le style de chaque cellule individuelle. J'ai comme l', 20 colonnes dans la réalité.
C'est plus simple si l'aide de CSS, par opposition à des styles en ligne. Étant donné que cela nécessite des styles en ligne en utilisant le fond comme suggéré dans d'autres réponses, c'est une meilleure solution.

OriginalL'auteur detaylor

Vous devez vous connecter pour publier un commentaire.