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.
Related
I want it to look similar to the numbers in black circles on this MDN image.
https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
table {
border-collapse: collapse;
margin: 0 auto;
}
table td {
padding: 1rem;
border: 3px solid black;
}
I didn't understand very much of your question
but I create a sample close to the image that u provide
Demo
table {
border-collapse: collapse;
margin: 0 auto;
}
table td {
padding: 1rem;
border: 3px solid black;
position: relative;
}
table td > span {
position: absolute;
top: -30%;
left: 45%;
background-color: black;
color: white;
border-radius: 100px;
padding: 2px;
}
<table>
<tr>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
</table>
You can try the following:
Create a wrapping div, put image of grid in it with relative positioning, and put texts (divs) in it with absolute positioning, something like this: How to absolutely position shape elements relative to an underlying image?
Or you can use canvas and draw the entire thing yourself.
There are probably more ways to do it, but take a look at above for a start.
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>
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 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/
I am trying to add cell spacing to a html table.
I want to add spacing between cells without the outer spacing.
My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.
I would like to put cell spacing without the red (outer) part - only the yellow one.
Is it possible?
Edit:
The image was drawn by hand (MS-Paint) only for illustration.
The coloring is for debugging - so that one can see where the borders, and spacing is.
I have found a roundabout solution including some additional div-s:
.inner-spacing {
border-collapse: collapse;
background-color: yellow;
border: 2px solid black;
}
.inner-spacing td {
padding: 0;
}
.inner-spacing td > div {
width: 60px;
height: 60px;
background-color: green;
border: 2px solid black;
margin: 10px;
}
.inner-spacing tr:first-child > td > div {
margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
margin-right: 0px;
}
<table class="inner-spacing">
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
</table>
So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).
I wonder if there are some other solutions - so any new solution is welcome!
This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing
Stack Snippet
table {
font: bold 13px Verdana;
background: black;
margin: 30px auto;
border-spacing: 0;
}
table td {
padding: 30px;
background: red;
color: #fff;
}
table tbody {
margin: -10px;
display: block;
border-spacing: 10px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
This is kinda tricky, you need to follow something like this:
table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>