How best highlight (red border, outline, etc) a table cell. without taking up extra space
How can I best highlight a cell in a table, without taking up additional space. Just setting the background color is not good enough. (as it has to be a light color for the number/text to be readable).
CSS Outline would be OK if it could have rounded corners, but without them it doesn't have the same look/style as the rest of the document.
The best I have so far is putting a border around an absolute element positioned over the cell. But this requires the extra element, AND it's positioned OVER, not UNDER, so the color needs to have opacity, in case it is over text in adjacent cells.
<style>
td {
vertical-align:top; position:relative; text-align:right;
}
.bordered {
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
<tr>
<td><span class="bordered"> </span>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>1234</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123456789</td>
</tr>
</table>
a) Can Outline have rounded corners?
b) Can above be done without the extra element?
c) Can above be positioned Under, rather than Over the cell?
Background:
I have an html app. that produces a 'Picking List' (for operatives to pick the right products for an Order. It has a 'Quantity' field which css highlights yellow when it's greater than ONE (but operatives don't notice it - and just despatch one (which is the usual qty).
css highlights with a background Yellow - if we use Red - it's difficult to read the number (which is in black).
No cross-browser issues as operatives just use Chrome internally.
html css html-table background outline
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
add a comment |
How can I best highlight a cell in a table, without taking up additional space. Just setting the background color is not good enough. (as it has to be a light color for the number/text to be readable).
CSS Outline would be OK if it could have rounded corners, but without them it doesn't have the same look/style as the rest of the document.
The best I have so far is putting a border around an absolute element positioned over the cell. But this requires the extra element, AND it's positioned OVER, not UNDER, so the color needs to have opacity, in case it is over text in adjacent cells.
<style>
td {
vertical-align:top; position:relative; text-align:right;
}
.bordered {
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
<tr>
<td><span class="bordered"> </span>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>1234</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123456789</td>
</tr>
</table>
a) Can Outline have rounded corners?
b) Can above be done without the extra element?
c) Can above be positioned Under, rather than Over the cell?
Background:
I have an html app. that produces a 'Picking List' (for operatives to pick the right products for an Order. It has a 'Quantity' field which css highlights yellow when it's greater than ONE (but operatives don't notice it - and just despatch one (which is the usual qty).
css highlights with a background Yellow - if we use Red - it's difficult to read the number (which is in black).
No cross-browser issues as operatives just use Chrome internally.
html css html-table background outline
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
add a comment |
How can I best highlight a cell in a table, without taking up additional space. Just setting the background color is not good enough. (as it has to be a light color for the number/text to be readable).
CSS Outline would be OK if it could have rounded corners, but without them it doesn't have the same look/style as the rest of the document.
The best I have so far is putting a border around an absolute element positioned over the cell. But this requires the extra element, AND it's positioned OVER, not UNDER, so the color needs to have opacity, in case it is over text in adjacent cells.
<style>
td {
vertical-align:top; position:relative; text-align:right;
}
.bordered {
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
<tr>
<td><span class="bordered"> </span>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>1234</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123456789</td>
</tr>
</table>
a) Can Outline have rounded corners?
b) Can above be done without the extra element?
c) Can above be positioned Under, rather than Over the cell?
Background:
I have an html app. that produces a 'Picking List' (for operatives to pick the right products for an Order. It has a 'Quantity' field which css highlights yellow when it's greater than ONE (but operatives don't notice it - and just despatch one (which is the usual qty).
css highlights with a background Yellow - if we use Red - it's difficult to read the number (which is in black).
No cross-browser issues as operatives just use Chrome internally.
html css html-table background outline
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
How can I best highlight a cell in a table, without taking up additional space. Just setting the background color is not good enough. (as it has to be a light color for the number/text to be readable).
CSS Outline would be OK if it could have rounded corners, but without them it doesn't have the same look/style as the rest of the document.
The best I have so far is putting a border around an absolute element positioned over the cell. But this requires the extra element, AND it's positioned OVER, not UNDER, so the color needs to have opacity, in case it is over text in adjacent cells.
<style>
td {
vertical-align:top; position:relative; text-align:right;
}
.bordered {
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
<tr>
<td><span class="bordered"> </span>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>1234</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><span class="bordered"> </span>123456789</td>
</tr>
</table>
a) Can Outline have rounded corners?
b) Can above be done without the extra element?
c) Can above be positioned Under, rather than Over the cell?
Background:
I have an html app. that produces a 'Picking List' (for operatives to pick the right products for an Order. It has a 'Quantity' field which css highlights yellow when it's greater than ONE (but operatives don't notice it - and just despatch one (which is the usual qty).
css highlights with a background Yellow - if we use Red - it's difficult to read the number (which is in black).
No cross-browser issues as operatives just use Chrome internally.
html css html-table background outline
html css html-table background outline
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
edited Nov 29 '18 at 8:06
Brian Tompsett - 汤莱恩
4,2421339103
4,2421339103
asked Nov 28 '18 at 18:55
user801347user801347
6782917
asked Nov 28 '18 at 18:55
user801347user801347
6782917
asked Nov 28 '18 at 18:55
user801347user801347
6782917
6782917
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
Just make ALL of the TDs have a 1px transparent border, then on the selected ones set the color.
td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
add a comment |
In relation to Julie's answer, you can actually have the best of both worlds if you also apply a border-radius. For instance:
td {
border: 0px solid transparent;
box-shadow: 0 0 5px red;
border-radius: 10px;
}
The border itself is invisible and takes no space, but the box-shadow will now follow the curve of the would-be border. You can adjust the box shadow params to make the outline hard or fuzzy.
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
add a comment |
If you can not take up ANY space then try this:
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>I an using the pseudo-element ::before to show the border. Like your example it is position: absolute and then I tie the top, left, right and bottom to the cell.
Click on the toggle button to see the adding and removal of the borders.
UPDATED
Based on your question I changed top, left, right and bottom to negative numbers to avoid overlap
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
add a comment |
You could use a box shadow as a border.
.bordered {
box-shadow: 0 0 5px red;
}
It's not rounded, but it doesn't look quite as boxy either.
answered Nov 28 '18 at 20:00
JulieJulie
137
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53526268%2fhow-best-highlight-red-border-outline-etc-a-table-cell-without-taking-up-ex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Just make ALL of the TDs have a 1px transparent border, then on the selected ones set the color.
td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
add a comment |
Just make ALL of the TDs have a 1px transparent border, then on the selected ones set the color.
td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
add a comment |
Just make ALL of the TDs have a 1px transparent border, then on the selected ones set the color.
td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
Just make ALL of the TDs have a 1px transparent border, then on the selected ones set the color.
td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>td {
border: 1px solid transparent;
vertical-align:top;
text-align:right;
}
.bordered {
border-color: red;
border-radius: 4px;
}<table style="width: 100%">
<tr>
<td class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bordered">  123456789</td>
</tr>
</table>answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
answered Nov 28 '18 at 19:04
IntervaliaIntervalia
4,81211134
4,81211134
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
add a comment |
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
The 'invisible' border takes up space I don't have. e.g. it needs to be 6px or greater to show up. I should have explained this upfront better.
– user801347
Nov 28 '18 at 19:20
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
See my other answer.
– Intervalia
Nov 28 '18 at 19:35
add a comment |
In relation to Julie's answer, you can actually have the best of both worlds if you also apply a border-radius. For instance:
td {
border: 0px solid transparent;
box-shadow: 0 0 5px red;
border-radius: 10px;
}
The border itself is invisible and takes no space, but the box-shadow will now follow the curve of the would-be border. You can adjust the box shadow params to make the outline hard or fuzzy.
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
add a comment |
In relation to Julie's answer, you can actually have the best of both worlds if you also apply a border-radius. For instance:
td {
border: 0px solid transparent;
box-shadow: 0 0 5px red;
border-radius: 10px;
}
The border itself is invisible and takes no space, but the box-shadow will now follow the curve of the would-be border. You can adjust the box shadow params to make the outline hard or fuzzy.
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
add a comment |
In relation to Julie's answer, you can actually have the best of both worlds if you also apply a border-radius. For instance:
td {
border: 0px solid transparent;
box-shadow: 0 0 5px red;
border-radius: 10px;
}
The border itself is invisible and takes no space, but the box-shadow will now follow the curve of the would-be border. You can adjust the box shadow params to make the outline hard or fuzzy.
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
In relation to Julie's answer, you can actually have the best of both worlds if you also apply a border-radius. For instance:
td {
border: 0px solid transparent;
box-shadow: 0 0 5px red;
border-radius: 10px;
}
The border itself is invisible and takes no space, but the box-shadow will now follow the curve of the would-be border. You can adjust the box shadow params to make the outline hard or fuzzy.
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
answered Nov 28 '18 at 20:24
Ben ViauBen Viau
765
765
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
add a comment |
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
Definitely part of the answer - Tks
– user801347
Nov 28 '18 at 21:36
add a comment |
If you can not take up ANY space then try this:
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>I an using the pseudo-element ::before to show the border. Like your example it is position: absolute and then I tie the top, left, right and bottom to the cell.
Click on the toggle button to see the adding and removal of the borders.
UPDATED
Based on your question I changed top, left, right and bottom to negative numbers to avoid overlap
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
add a comment |
If you can not take up ANY space then try this:
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>I an using the pseudo-element ::before to show the border. Like your example it is position: absolute and then I tie the top, left, right and bottom to the cell.
Click on the toggle button to see the adding and removal of the borders.
UPDATED
Based on your question I changed top, left, right and bottom to negative numbers to avoid overlap
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
add a comment |
If you can not take up ANY space then try this:
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>I an using the pseudo-element ::before to show the border. Like your example it is position: absolute and then I tie the top, left, right and bottom to the cell.
Click on the toggle button to see the adding and removal of the borders.
UPDATED
Based on your question I changed top, left, right and bottom to negative numbers to avoid overlap
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
If you can not take up ANY space then try this:
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>I an using the pseudo-element ::before to show the border. Like your example it is position: absolute and then I tie the top, left, right and bottom to the cell.
Click on the toggle button to see the adding and removal of the borders.
UPDATED
Based on your question I changed top, left, right and bottom to negative numbers to avoid overlap
var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
document.querySelectorAll('[a]').forEach(
el => {
el.classList.toggle('bordered');
}
);
});td {
vertical-align:top;
text-align:right;
}
.bordered {
position: relative;
z-index: 1;
}
.bordered::before {
border: 4px solid rgba(255,0,0,.5);
border-radius: 4px;
bottom: -2px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -2px;
z-index: -1;
}<table style="width: 100%">
<tr>
<td a class="bordered"> 1 </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td a class="bordered"> 123</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1234</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td a class="bordered">  123456789</td>
</tr>
</table>
<button id="toggle">Toggle</button>answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
edited Nov 28 '18 at 20:59
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
answered Nov 28 '18 at 19:32
IntervaliaIntervalia
4,81211134
4,81211134
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
add a comment |
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
Very clever solution, but a border of 1px doesn't highlight enough, and by 4px potentially obscures the content.
– user801347
Nov 28 '18 at 20:44
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I just updated to include thicker borders, z-index and partial transparency.
– Intervalia
Nov 28 '18 at 20:48
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
I was also trying neg. z-index at the same time as you - it does send the border backwards, and this does help. Is there a way I can use pseudo elements to expand outside the confines of the cell?
– user801347
Nov 28 '18 at 20:55
See latest updates
– Intervalia
Nov 28 '18 at 20:59
See latest updates
– Intervalia
Nov 28 '18 at 20:59
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
Ah ... just been experimenting with your solution, and I see that I CAN move the borders outside the area of the cell. This is definitely a solution - thanks
– user801347
Nov 28 '18 at 21:12
add a comment |
You could use a box shadow as a border.
.bordered {
box-shadow: 0 0 5px red;
}
It's not rounded, but it doesn't look quite as boxy either.
answered Nov 28 '18 at 20:00
JulieJulie
137
add a comment |
You could use a box shadow as a border.
.bordered {
box-shadow: 0 0 5px red;
}
It's not rounded, but it doesn't look quite as boxy either.
answered Nov 28 '18 at 20:00
JulieJulie
137
add a comment |
You could use a box shadow as a border.
.bordered {
box-shadow: 0 0 5px red;
}
It's not rounded, but it doesn't look quite as boxy either.
answered Nov 28 '18 at 20:00
JulieJulie
137
You could use a box shadow as a border.
.bordered {
box-shadow: 0 0 5px red;
}
It's not rounded, but it doesn't look quite as boxy either.
answered Nov 28 '18 at 20:00
JulieJulie
137
edited Nov 28 '18 at 20:08
answered Nov 28 '18 at 20:00
JulieJulie
137
answered Nov 28 '18 at 20:00
JulieJulie
137
answered Nov 28 '18 at 20:00
JulieJulie
137
137
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53526268%2fhow-best-highlight-red-border-outline-etc-a-table-cell-without-taking-up-ex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
