web-dev-qa-db-fra.com

Classe sur la table?

N'est-il pas possible de styliser un <table> et son <tr> <td> à l'aide de classes css?

Par exemple:

<table class="calendar_table">
<tr>
        <td>
            <h2>Datum</h2>
        </td>
        <td>
            <h2>Event</h2>
        </td>
        <td>
            <h2>Type</h2>
        </td>
    </tr>
</table>

Ensuite, en utilisant quelque chose comme ce CSS:

.calendar_table {
    width:880px;
}
.calendar_table tr {
    margin:0;
    padding:4px;
}
htmlcsshtml5html-table
7
jamietelin

C'est possible, ça devrait fonctionner correctement!

Voici un exemple

Amusez-vous, vous pouvez faire ce que vous voulez! Je ne recommande pas d'utiliser <table>lever, à moins qu'il ne soit utilisé pour présenter des données structurées censées figurer dans une table. S'il s'agit de dessiner une mise en page, utilisez <div> et CSS!

12
David

Comme Aleks l'a écrit, je définirais aussi CSS pour la table elle-même. Mais pas de crochets imbriqués dans la définition CSS comme: table.custom_class {...  td, th {...} }.

<table class="custom_class">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Giovanni</td>
    <td>Rovelli</td>
  </tr>
  <tr>
    <td>Roland</td>
    <td>Mendel</td>
  </tr>
</table>

L'exemple CSS suivant peut être utilisé:

table.custom_class {
    border:solid 5px #006CFF;
    margin:0px;
    padding:0px;
    border-spacing:0px;
    border-collapse:collapse;
    line-height:22px;
    font-size:13px;
    font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
    font-weight:400;
    text-decoration:none;
    color:#0018ff; 
    white-space:pre-wrap;
}
table.custom_class th {
  padding: 20px;
  background-color:#98dcff;
  border:solid 2px #006CFF;
}
table.custom_class td {
  padding: 20px;
  border:solid 1px #006CFF;
}
table.custom_class tr {
    margin:0;
    padding:4px;
}


Vous pouvez le voir en action https://jsfiddle.net/16L9h2ft/

3
user3815508

Oui c'est possible. Ce que vous avez fonctionne dans une certaine mesure (avec des ajustements).

Pour dénommer le td, utilisez:

.calendar_table td {
}

Ou:

.calendar_table tr td {
}

travaillera également.

Pour définir des attributs tels que des bordures, des couleurs et des tailles, il s'agit d'une méthode plus simple, qui consiste à incorporer ces informations au format HTML.

Cette approche est excellente avec des tableaux de données où l'information devrait naturellement être présentée dans un tableau. Si vous disposez des données, utilisez des balises sémantiquement correctes telles que <div> et <span>.

2
justkt

Votre approche est parfaitement valide! 

1
check123

Les lignes de table ne prennent pas de remplissage, les TD en font.

Changez votre style pour:

.calendar_table td {
    margin:0;
    padding:4px;
}
1
Diodeus - James MacFarlane
  • Les tables se développent si nécessaire pour que le contenu s'adapte
  • Pour autant que je sache, les lignes de table n'ont pas de marge ou de remplissage

Ces règles de présentation s’appliquent quelle que soit la configuration choisie. 

1
Álvaro González

Les réponses ci-dessus sont soit anciennes, soit inexactes, car elles ignorent le style des éléments table et non pas simplement td ou th etc.

Si nous voulions une table comme celle-ci:

<table class="custom_class">
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row value 1</td>
      <td>row value 2</td>
      </tr>
  </tbody>
</table>

Ensuite, dans .css, nous devrions mettre:

table.custom_class  {
  border: 1px solid black;

  td, th {
    color: blue;
  }
}
0
Aleks

Beau thème de table verte:

https://jsfiddle.net/sujayun/qwsLk3aL/

table.namTblCls
{
    color:purple;
    border: #004400 4px solid;
    border-collapse: collapse;
    font-size:16px;
}

table.namTblCls th
{
    text-align: center;
    color:yellow;
    background-color:#008800;
    border: #004400 2px solid;
    padding: 20px;
}

table.namTblCls td
{
    text-align: center;
    padding: 20px;
    border: #004400 1px solid ;
    border-right-width: 2px;
    border-left-width: 2px;
}

table.namTblCls tr:nth-child(odd)
{
    background-color: #DDFFDD;
}

table.namTblCls tr:nth-child(even)
{
    background-color: #BBFFBB;
}
0
Sujay U N