Bordures et espacement entre des rangées de tableaux spécifiques
je suis nouveau dans CSS et je travaille sur une application intraweb qui rendra dans les navigateurs standards modernes (IE support est nécessaire). J'ai passé beaucoup de temps à chercher des réponses sur ce site et d'autres, seulement pour trouver les réponses "c'est impossible parce que..."ou" fais ce piratage à la place...."mais je ne vais pas l'accepter.
Voici ce que j'ai besoin:
- une table avec une ligne d'en-tête et plusieurs corps rangées;
- Une solide frontière en vertu de la ligne d'en-tête;
- espace blanc Vertical (rembourrage? la marge? l'espacement?) entre la rangée d'en-tête et la première rangée de corps seulement;
- les rangées de corps sont surlignées sur le curseur de la souris.
je ne pouvais pas obtenir (2) pour être visible jusqu'à ce que j'style de la table border-collapse: collapse;. Fin. Mais (3) ne fonctionne apparemment qu'avec border-spacing, et seulement sur <td> éléments (pas <tbody> ou <tr>), qui est de toute façon désactivé par le collapse. Pendant ce temps, pour quelque mystérieuse raison, margin's ne sont pas reconnus pour <thead>,<tr>, ou <th> éléments, mais ayant padding-top sur la première rangée du corps est <td>'S fonctionne, sauf qu'il ne fonctionne pas, parce que quand je souris sur cette première ligne, la marge-qui-est-implémentée-comme -padding est mis en évidence aussi, ce qui me donne la nausée.
je sais qu'avoir quelques pixels de marge entre l'en-tête et le corps d'une table est comme une chose vraiment hors-de-champ gauche, pourquoi-quelqu'un-voudrait-jamais-cette chose vouloir, mais que dois-je vous dire? Je ne suis pas un rencard bon marché.
s'il vous Plaît être aussi brutale et condescendant que vous pouvez souligner la stupidité de ma part dans la compréhension de CSS, condition soit 1) dire comment le faire sans changer le balisage (ce qui préserve la séparation de la présentation du contenu CSS a été évidemment conçu pour encourager) ou 2) être d'accord avec moi que CSS est bizarre.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
5 réponses
cela réglerait vos problèmes sans aucun piratage et bien sûr c'est tout à fait possible. Le code mis à jour (seulement les modifications CSS) est partagé ci-dessous avec des explications.
problème 3:
nous pouvons utiliser le sélecteur CSS :first-of-type(ne ciblant que la première ligne) dans la succession avec tous les <td> sous cet attribut et l'attribut d'utilisation padding-top. Simple: -)
<tr> impossible d'avoir des valeurs de marge par défaut. Encore une fois des hacks sont disponibles(ci-dessus réponses mentionnées) mais je n'irais pas là-bas car vous ne le voulez pas.
et aussi depuis que nous avons utilisé padding, l'effet de vol stationnaire fonctionnerait parfaitement sur l'ensemble du contenu de la rangée. Par conséquent obtenir le changement désiré sans aucun changement de balisage.
problème 2:
nous pouvons supprimer l'attribut border-collapsetable et plutôt appliquer la bordure sur le <th>balises (laissez l' border-spacing: 0 reste ou la frontière serait discontinue). Plus Simple encore : -)
problemes 1 et 4 sont déjà couverts. Aucun changement de marge comme vous le souhaitiez. Voici le Violon
donc le code de style mis à jour ressemblerait à
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
d'Accord, dans l'ordre:
1: une table avec une ligne d'en-tête et plusieurs lignes de corps:
c'est Ce que les éléments thead et tbody ont été conçus pour:
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
Il y a aussi tfoot (voir références), qui, s'il est utilisé, doit être déclaré avanttbody élément.
2: Une solide frontière en vertu de la ligne d'en-tête:
thead tr th {
border-bottom: 2px solid #000;
}
Sélectionnez th éléments à l'intérieur du thead element tr selector n'est probablement pas nécessaire ici, et, bien qu'il ne fasse pas de mal, peut être simplifié à: thead th {/*...*/}.
3: espace blanc Vertical (rembourrage? la marge? l'espacement?) entre la ligne d'en-tête et la première rangée de corps seulement. padding, il semble, ne peut pas être appliquée à l' thead,tbody ou tr des éléments, puisqu'ils sont essentiellement (je suppose) 'non-visuels', donc il faut les définir sur le td éléments. Cela signifie que, en vol stationnaire, il ya une la grande "rangée" occupée par la première rangée pendant les :hover (voir la partie suivante).
tbody tr:first-child td {
padding-top: 1em;
}
4: les rangées de corps sont surlignées sur le curseur de la souris.
tbody tr:hover td {
background-color: #ffa;
}
Alors que vous pouvez appliquer :hover à la cellule actuellement en vol stationnaire, et plus tard à la fratrie (avec la fratrie générale ~ combinator) vous ne pouvez pas appliquer un style aux frères et sœurs qui apparaissent précédemment, donc ici nous stylisons le td éléments en réponse à l' :hover de leur parent tr.
La raison pour laquelle nous avons de style td (plutôt que de changer directement le background-colortr est parce que td les éléments ne sont pas typiquement par défaut sur un fond transparent, ce qui signifie que les éléments modifiés/mis en évidence background-color est "caché" par l' background-colortd éléments.
Références:
pour appliquer margin pour la première ligne de la table dont vous avez besoin pour display: block; tout d'abord, car la marge ne peut être appliquée qu'aux éléments de bloc (y compris les blocs en ligne)
Mais voici une autre solution utilisant le positionnement:
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
position: relative; /* Add positioning */
margin-top: 40px; /* Add some margin */
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
thead {
position: absolute; /* Position this element absolute */
top: -40px; /* And move it up */
}
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
<p>Thats how its done!</p>
</body>
Fondamentalement, nous appliquons position: relative; et position: absolute; à thead.
Vous pouvez maintenant déplacer le thead à l'intérieur de la table en utilisant top,bottom,left et right propriétés. Nous allons le déplacer vers le haut par 40px à l'aide de top: -40px;
Nous n'avons pas appliquer position: absolute; à tbody, parce que si nous le faisons - cet élément ne 'strechera plus la page' ou en d'autres termes tous les éléments suivants ignoreront sa hauteur. (essayez de le faire et voyez ce qui arrive aux suivants
bloc) La seule chose qui nous reste - est d'appliquer un peu de marge-dessus à la table elle-même, en la déplaçant vers le bas (comme nous avons déplacé le thead vers le haut)
Oui, CSS peut sembler un peu bizarre de temps en temps, mais c'est surtout parce que nous oublions comment certains éléments de page sont supposés à manipuler (c'est-à-dire les tables et leurs éléments enfant)
pourquoi ne pas ajouter une ligne vide au début comme
<tbody>
<tr><td> </td></tr>
<tr><td>blablablabla</td></tr>
tbody tr:first-child td{
padding-top: 15px;
}
tbody tr:first-child:hover{
background-color: transparent;
}
ainsi le rembourrage sera ajouté à la première ligne et la première ligne ne sera pas surlignée sur la souris? :)
Tous les 4 points sont là-bas-
- tout d'Abord télécharger metro ui css ici http://metroui.org.ua/
- inclure ses deux fichiers css 1. métro-bootstrap, 2.métro-bootstrap-responsive dans votre projet.
enregistrez cela dans BundleConfig.
grappes.Add (new StyleBundle ("~/Content/css / metroUI").Include("~/Content/css/métro-bootstrap.CSS", "~/Content/css/métro-bootstrap-responsive.css"));
Utilisez maintenant la classe "gr-items" pour la table
< table id= "divAllActivities" class= "gr-items">
<thead>
<tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
</tbody>
L'espoir c'est ce que vous voulez.