Czy możliwe jest posiadanie podpowiedzi dla komórek tabeli bez JavaScript. Nie można go użyć. Dzięki?Etykietki narzędzi dla komórek w tabeli HTML (bez javascript)
Odpowiedz
czy próbowałeś?
<td title="This is Title">
jego pracy w porządku tutaj na Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x
Tak. Możesz użyć atrybutu title
na elementach komórki, ze słabą użytecznością lub możesz użyć etykiet CSS (kilka istniejących pytań, być może duplikatów tego).
er ... Twój link wskazuje na tę stronę. – Christophe
To była naprawdę dziwna edycja; teraz cofnięte. W każdym razie, po prostu szukanie "podpowiedzi" daje wiele interesujących pytań i odpowiedzi. –
Możesz użyć css i pseudo-właściwości: hover. Oto simple demo. Używa następujących css:
a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}
Pamiętaj, że starsze przeglądarki mają ograniczoną obsługę: hover.
Najwyższy rangą odpowiedź przez Mudassar Baszirem pomocą "tytuł" atrybut wydaje się najłatwiejszym sposobem zrób to, ale daje mniejszą kontrolę nad wyświetlaniem komentarza/etykiety narzędzia.
Znalazłem, że odpowiedź Christophe'a na niestandardową klasę podpowiedzi wydaje się zapewniać większą kontrolę nad zachowaniem komentarza/podpowiedzi. Ponieważ dostarczone demo nie zawiera tabeli, jak na pytanie, tutaj jest a demo that includes a table.
Należy zauważyć, że styl "pozycja" dla elementu nadrzędnego zakresu (w tym przypadku) musi być ustawiony na "względny", aby komentarz nie wyświetlał zawartości tabeli podczas jej wyświetlania. Zrozumienie tego zajęło mi trochę czasu.
#MyTable{
border-style:solid;
border-color:black;
border-width:2px
}
#MyTable td{
border-style:solid;
border-color:black;
border-width:1px;
padding:3px;
}
.CellWithComment{
position:relative;
}
.CellComment{
display:none;
position:absolute;
z-index:100;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:red;
padding:3px;
color:red;
top:20px;
left:20px;
}
.CellWithComment:hover span.CellComment{
display:block;
}
<table id="MyTable">
<caption>Cell 1,2 Has a Comment</caption>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr></tr>
<td>Cell 1,1</td>
<td class="CellWithComment">Cell 1,2
<span class="CellComment">Here is a comment</span>
</td>
<td>Cell 1,3</td>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</tbody>
</table>
ewolucja co dodaje BioData41 ...
Place, co następuje w stylu CSS
<style>
.CellWithComment{position:relative;}
.CellComment
{
visibility: hidden;
width: auto;
position:absolute;
z-index:100;
text-align: Left;
opacity: 0.4;
transition: opacity 2s;
border-radius: 6px;
background-color: #555;
padding:3px;
top:-30px;
left:0px;
}
.CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>
Następnie użyj go tak:
<table>
<tr>
<th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
<th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
<th>Opened</th>
<th>Event</th>
<th>Severity</th>
<th>Id</th>
<th>Component Name</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
Jaka jest różnica? –
- 1. Etykietki narzędzi w panelach
- 2. przeciąganie komórek tabeli HTML
- 3. Zachowaj etykietki narzędzi podczas eksportowania GraphPlot
- 4. Uzyskaj wartości komórek tabeli HTML w wierszach, klikając na nie
- 5. Używanie JavaScript do zmiany szerokości komórek tabeli
- 6. Określanie szerokości procentowej dla komórek tabeli CSS
- 7. Jak określić dopełnienie tabeli w CSS? (tabela, bez wypełniania komórek)
- 8. Jak uzyskać wartość komórek w tabeli html za pomocą JQuery
- 9. Scalanie komórek w tabeli JXTreeTable
- 10. wyszukiwanie w tabeli html
- 11. Prefiks komórek tabeli trybów reklamowych
- 12. Formatowanie komórek tabeli JavaFX
- 13. Lepsza alternatywa niż do wyświetlania pustych komórek tabeli HTML?
- 14. Jak utworzyć etykietki narzędzi Bootstrap na Twitterze tak, aby wyglądały jak popover (bez linii tytułowej)?
- 15. Kotwica Html poziomo bez javascript
- 16. Javascript do eksportu tabeli html do Excela
- 17. Zastosowanie wiersz tabeli kolorowania dla komórek w Bootstrap
- 18. Etykietki d3 dla wielu połączonych wykresów dc.js
- 19. JavaScript - eksport danych tabeli HTML do Excela
- 20. Generowanie tabeli HTML z dwuwymiarowej tablicy JavaScript
- 21. zaawansowane tabeli w LaTeX z multilinii komórek
- 22. Używanie jQuery do edycji pojedynczych komórek tabeli
- 23. xtable dla warunkowego formatowania komórek znaczące wartości p tabeli
- 24. pliki Odśwież JavaScript bez odświeżania HTML
- 25. najszybszy sposób użycia css dla tabeli html bez wpływu na kolejną tabelę html
- 26. Jak umieścić dane JSON w html/javascript siatki tabeli
- 27. Zastosuj styl do komórek pierwszego rzędu.
- 28. Jak utworzyć paski zebry na tabeli html bez generowania klas javascript i parzystych/nieparzystych?
- 29. Wyodrębnianie lxml XPath dla tabeli html
- 30. Widok tabeli Segmenty komórek nie działa
Jest, ale jest naprawdę wolny :( – thigi