I am trying to show a tooltip when the user hovers over the left border of the first td cell. My code is given below (JSFiddle here):
HTML
<table class="cart">
<tr>
<th id="pos">Pos</th>
<th id="name">Product</th>
<th id="price">Price</th>
</tr>
<tbody>
<tr>
<td>
<span>New visual experience!</span>
</td>
<td>
1
</td>
<td>19.99</td>
</tr>
<tr>
<td>
<span>Inject music directly into your ears!</span>
</td>
<td>
2
</td>
<td>19.99</td>
</tr>
</tbody>
</table>
CSS
table tr td{
border: 1px solid blue;
}
.cart { width: 100%; }
td span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
cursor: arrow;
}
td:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
cursor: pointer;
}
I have tried many ways, but the tooltip keeps appearing over the entire cell, and not over the left border like I want it. Can someone help please?
I would add an absolutely positioned div with a width the size of the border (or slightly bigger) inside of the first <td> then use that to listen for the hover event.
https://jsfiddle.net/x1c3hxyx/4/
Related
I was wondering if it was possible, with html and/or CSS, to collapse only tr with he table's outline, while having different border styles for the table's outline and trs, and the tds and ths.
I know this is complicated, so if this can make it clearer, here's a drawing of what I'm trying to achieve:
No, border-collapse applies only to the whole table, and it is not a valid property for tr or td elements so you cannot apply it to those to get a different spacing.
However you can “fake” it by adding the cell content into a div and using it for some of the styling:
Apply the outer table styling to the table as normal
Apply the row styling to the top and bottom borders of the th / td cells
Apply the "cell" styling to the divs inside the th & tds.
Working Example:
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,
td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}
<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>
Found a way by just adding an hr and a minuscule tr between both trs.
hr {
border: 4px outset rgb(207, 172, 179);
width: 443px;
position: absolute;
top: 388px;
left: 35px;
}
tr#mini {
border: none;
padding: 0px;
margin: 0px;margin-top: 0px;
margin-bottom: 0px;
height: 8px;
}
HTML:
<table id="tableau" class="nomaltext">
<tr>
<th>
25g
</th>
<th>
50g
</th>
<th>
75g
</th>
<th>
100g
</th>
<th>
Personnalisé (min. 120g)
</th>
</tr>
<tr id="mini">
<hr>
</tr>
<tr>
<td>
5,99$
</td>
<td>
8,99$
</td>
<td>
13,80$
</td>
<td>
7,40$
</td>
<td>
11¢/gramme
</td>
</tr>
</table>
I'm building a table in which I want a given row to be highlighted on hover. However, I want the hover space be shorter than the row's height.
Picture for preview. This is printscreen of a Sketch file. You can see that the white border is in a certain distance from the hovered space. Is it even possible to create something like this?
So far, I tried to make the border-spacing larger but then I get the space between the columns too, which is not the desired outcome.
Try something like this :
tr{
background: grey;
padding: 10px;
}
.hover {
padding : 5px;
margin : 5px;
cursor: pointer;
border-radius: 10px;
}
.hover:hover {
background : lightblue;
color: darkblue;
}
<table>
<tbody>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
</tbody>
</table>
You could try using: border-collapse:separate; with border-spacing
table {
width: 100%;
border-collapse:separate;
border-spacing: 0 3px;
}
table {
width: 100%;
border-collapse:separate;
border-spacing: 0 3px;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:hover {
background: red;
border-radius: 5px;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Table rows cant have have margin or padding values nor can they use border-radius or other properties that transform them.
How can I add a white space around the background color of a table cell in CSS? I have this, but the background color goes all the way to the edge. Padding seems to work for the content, but not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
EDIT: Here's my full CSS that matters to these pieces. I've made a couple updates, but am still having the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
It's being applied to a table in this partial view:
<table id="main-monitor">
<thead>
<tr>
<th>
#Html.DisplayNameFor(m => m.Name)
</th>
<th>
#Html.DisplayNameFor(m => m.A)
</th>
<th>
#Html.DisplayNameFor(m => m.B)
</th>
<th>
#Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Name</td>
<td style="background-color:#item.AColor"><span>#item.A</span></td>
<td style="background-color:#item.BColor"><span>#item.B</span></td>
<td style="background-color:#item.CColor">#item.C</td>
</tr>
}
</tbody>
</table>
Solution 1
As mentioned by "Advait S", You can use the border-spacing css rule for table tags
Here is a practical example
td {
background: red;
}
table {
border-spacing: 10px;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
Solution 2
Despite solution 1 is elegant. you can change the display property to your table cell to inline-block and then apply a margin to your cells
snippet below
td{
background:red;
margin:10px;
display:inline-block;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
You can also try this.
Write the text of table in span and apply style as.
HTML
<table>
<tr>
<td><span>Hello</span></td>
</tr>
</table>
CSS
td{
border: 1px Solid Black;
background-color: white;
}
td span{
background-color: blue;
margin: 5px;
}
See this
I have tried to read up on this and have gooten it to work before but can't get the hover-effect on one cell to change the background-color of another cell. Any suggestions?
CSS
.frontpagetabellskraddarsy {
background-color: #F8F8F8;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
padding: 15px; }
.frontpagecelltextskraddarsy {
background-color: #FFFFFF;
padding-top: 5px;
text-align: center;
}
.frontpagecellbildskraddarsy:hover .frontpagecelltextskraddarsy
{
background-color: #289CDD;
color: #FFFFFF;
}
HTML
<table class="frontpagetabellskraddarsy" style="background-color: #f8f8f8;" cellspacing="20">
<tbody>
<tr>
<td style="text-align: center; background-color: #f8f8f8;" colspan="3" width="33%">[separator headline="h2" title="Skräddarsy din drömresa"]</td>
</tr>
<tr>
<td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecellbildskraddarsy"><img alt="" src="http://media.baliexperten.se/2014/01/skraddarsypaket.png" class="frontpageresepaketbildskraddarsy"></td>
</tr>
<tr>
<td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecelltextskraddarsy"><strong>SKRÄDDARSY DIN DRÖMRESA </strong>
Vi hjälper dig att skräddarsy just din drömresa till Bali
</td>
</tbody>
</table>
<style type="text/css">
#hoverDiv, #otherDiv {
width: 200px;
margin: 5px;
float: left;
height: 30px;
border: 1px solid gray;
border-radius: 5px;
}
#hoverDiv:hover + #otherDiv {
background: #9ce;
}
</style>
<div id="hoverDiv">
Hover me!
</div>
<div id="otherDiv">
My color will change :)
</div>
You cannot achieve this with arbitrary markup. You only option is to capture the hover on a tablerow tr and then animate either the adjacent row or one if it's cells via help of the adjacent sibling combinator:
tr:hover + tr td
Quick and messy example fiddle with your code example
Hovering over a cell and achieve an effect for a cell of another row is not possible with CSS3! Selectors Level 4 have a proposal to determine the Subject of a selector, where you get more flexibility (but I think this case still would not work).
<tr id="one">
<td></td> // #one td:hover
</tr>
<tr id="two">
<td></td> // #two td
</tr>
One thinks something like #one td:hover + #two td might work, however, the context of the last element in the first part of the selector is considered. Once you are on cell level #one td you cannot take a step backwards to select the sibling + #two.
#one:hover + #two td on the other hand works, because you capture the hover on #one, then traverse to the next row + #two and then finally "select" the child element td.
How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)
UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.
Here is my code I'm working with and a jsfiddle.net page for your convience ;)
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:
http://jsfiddle.net/ptriek/uJ5zN/2/
At this point, #ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.
Fiddle: http://jsfiddle.net/uJ5zN/4/
HTML
<div class="wrapper">
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
</div>
CSS
.wrapper
{
border: 4px solid #000;
width: 400px;
}
table {
width: 400px;
}
table tr{
border-bottom: 4px solid #CCC;
}
One way would be to use the CSS last-child selector as follows:
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
table tr:last-child {
border-bottom: 4px solid #000;
}