Je développe un projet ASP.NET. J'ai un Voici le tableau tel qu'il semble actuellement. J'ai besoin des légères lignes de grille qui courent verticalement pour aller sur le dessus des barres roses et vertes.
J'utilise jquery.corner pour les coins arrondis des cellules afin que cela puisse ajouter complexité ultérieure.
Actuellement, ces lignes de grille sont en fait des cellules de table vides avec une bordure en pointillé CSS sur le côté gauche. La raison en est que j'avais essayé pour que les lignes de grille apparaissent sur le dessus, mais je ne pouvais pas le faire, alors mon code ne fait aucune tentative de le faire actuellement. Donc, ma question devrait être, existe-t-il un moyen de le faire?
Je n'ai pas pu obtenir les coins arrondis et les styles à appliquer correctement sur jsfiddle, alors j'ai utilisé Pastebin, veuillez copier le texte ici dans un fichier HTML uni et vous devez obtenir la sortie correcte semblable à l'image ci-dessus - laissez-moi savoir si cela semble différent / les coins sont carrés.
Remarque: Si vous utilisez IE pour afficher le fichier et utiliser les outils de développeur IE, il est possible de définir des cellules de table qui sont vraiment utiles pour cela. 
J'ai essayé une simple approche CSS de régler les cellules z-index de la propriété sur 0, puis sur les tables z-index à 1, mais cela ne fonctionne pas ( Je suppose que les tables "CSS remplace les cellules" CSS).
4 Réponses :
Mettez la table dans une DIV qui a Position: Relative; Ajoutez une autre div avec une classe de "superposition" après la table qui a un arrière-plan translucide, dimensionné le Identique à la table:
Malheureusement, avoir une image de grille statique ne fonctionnera pas - la table est générée de manière dynamique et donc la largeur variable / la taille de la cellule, etc.
Je penserais que si au lieu d'avoir les cellules colorées à plusieurs cellules, vous ne colorez que les cellules individuelles, les lignes de grille seraient préservées. Je ne sais pas à quoi ressemble votre balisage, et je ne vous suggère pas d'utiliser ce marquage exactement, mais voici un exemple de la façon dont cela serait potentiellement regarder: http://jsbin.com/ilinap/edit#htmlive
Cela permettrait-il que le texte s'étendait sur les cellules? Peut-être avec une DIV flottante dans la première cellule avec un intelligent z-index ing magique?
Le texte rend la situation un peu plus difficile ... Je n'ai pas de solution simple pour cela. Une chose que vous pourriez faire est de placer le texte dans une div absolument positionnée, puis utilisez JQuery pour définir les dimensions et la position de la DIV.
Mais en dehors de cela, il semble que l'ajout de texte sur des cellules spanns tout en préservant des lignes de grille peut sembler un peu bizarre ... Peut-être que vous pourriez peut-être redéfinir votre mise en page et, dans le processus, rendez-vous un peu plus facile à développer?
Je vous suggère fortement de fournir un exemple en direct que nous pouvons analyser afin que nous puissions fournir une réponse définitive. Maintenant, avec une supposition pure, votre plugin ou tout ce qui semble que vous utilisez pour colorer et que les choses rondes semblent appliquer lesdits effets «au-dessus» de la table elle-même à travers l'insertion de divs flottants, pourquoi les diviseurs verticaux ne s'affichent pas. .
OK, je suis allé dans la page des coins rondes JQuery que vous avez fournie et ce que je viens de dire ci-dessus est fondamentalement comment fonctionne le plugin, ici, par leur propre définition:
Il est important de comprendre que ce plugin de coin tirant sa magie en ajoutant plus d'éléments à la page. Spécifiquement, il ajoute des "bandes" div à l'élément à accaler et définit une couleur d'arrière-plan solide sur ces bandes afin de masquer les coins réels de l'élément réel . Donc, si vous reculez et regardez l'élément coincé, pensez à y avoir des divs de couleur solides cacher les coins carrés de l'article que vous souhaitez modifier. Cela vous aide
comprendre la limitation inhérente ** S de ce petit plugin. ** Il convient le mieux à l'arrondissement des éléments de niveau des blocs (divs, paragraphes, etc.) et peut présenter plus de défis lorsque vous essayez de compléter les éléments en ligne (couvre-fruits, ancres, etc.). Récemment, j'ai ajouté de la prise en charge de Native Border-Radius arrondi dans les navigateurs Cela le supporte (Opera 10.5+, Firefox, Safari et Chrome). Donc
dans Ces navigateurs Le plugin définit simplement une propriété CSS sur l'élément . Mais dans IE, nous devrons attendre la version 9 avant que cela soit pris en charge. Et pour tous les navigateurs, choisir un motif autre que "rond" nécessite L'utilisation de la méthode "div staches" . La prochaine question logique est la suivante:
1.- Conçoit-tu avec IE à l'esprit? Votre site est-il destiné à être compatible entre le navigateur croisé?
2.- Si la majorité de vos utilisateurs n'utilisent pas, c'est-à-dire, je vous suggère de quitter le plugin et d'utiliser simplement un rayon de frontière chaque fois que nécessaire.En fin de compte, si vous souhaitez appliquer les lignes verticales sur les divs volant de votre plugin, vous devrez appliquer une image transparente de superposition de modèle de répétition, qui vise ensuite vos utilisateurs, car ils clique sur l'image et non le contenu de la table et de la cellule en dessous. ça.
Alors ... laissez-moi savoir ce que vous voulez faire et je vais fournir une meilleure réponse.
D'accord merci. Pour répondre à votre question, il est destiné à 100% d'IE, car il s'agit pour l'intranet de mon lieu de travail qui utilise uniquement Internet Explorer. D'autres navigateurs que je ne me préoccupe pas.
Ok, pouvez-vous poster un échantillon en direct? Si vous le faites, je vous promets une solution de travail en direct.
Ok j'ai trouvé le problème ... lorsque vous donnez un
Avez-vous absolument besoin de fusionner les cellules?
Malheureusement oui :( Dans l'exemple en direct, j'ai pris des détails car il est des choses internes à mon lieu de travail, mais dans les cases, il y a normalement un peu de texte qui peut facilement couvrir plus d'une cellule (une journée).
OK, une inspection supplémentaire révèle que, même dans FF et Chrome, à l'aide de l'attribut Radius frontalier avec des cellules fusionnées entraîne une perte de la propriété frontalière de la TD, ce qui signifie que cette approche est à peu près faux. Même avec des images de fond ... ça va être en désordre
Merci beaucoup pour vos efforts, cela a été vraiment utile. Je pense que l'exigence sera abandonnée à la lumière de cela.
La meilleure façon de le faire à mon avis est d'utiliser un antécédent avec la légère ligne et de la faire répéter-x sur les divs d'angle arrondis. Tant que la grille a toujours la même taille et l'arrière-plan est coupé sur le pixel exact, je ne vois pas une raison pour laquelle cela ne fonctionnerait pas.
Peut-être avez-vous besoin de différentes sources pour différentes couleurs. J'espère que ça a du sens.
Je viens de confirmer que jquery.corner fonctionnera bien avec des images de fond répétées. Bonne chance!
Votre question est difficile à répondre sans quelque chose de visuel - «Comment va-t-il regarder maintenant» et «comment vous voulez que cela ressemble»!
Quel est votre code actuel? Nous savons maintenant que ce que vous voulez , mais je ne sais pas ce que vous avez
@yunzen: merci, s'il vous plaît voir Modifier
Avez-vous essayé d'ajouter les grilles après avoir ajouté les cellules de Rowdatabound?