When nesting multilple spans within each other with a border, by default, their horizontal (top and bottom) borders overlap, and their vertical (left and right) borders stack.
JsFiddle: https://jsfiddle.net/4un9tnxy/
.html:
<span><span>a</span> + <span>b</span></span>
.css:
span { border: 1px solid black; }
You can set display: inline-block; which will make all borders stack.
Is there a way to rig it so that all borders overlap?
I think this may be a better approach for you even though it's not with a span it produces a better result. It doesn't work in jsfiddle for some reason but works in browsers.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</body>
</html>
A border can only be drawn around what a tag contains.
However, you can write additional CSS to remove the boarders of nested spans.
CSS
/*Border for span*/
span {
border: 1px solid black;
}
/*Remove nested span borders*/
span > span {
border-style: none;
}
Result: https://jsfiddle.net/jsallans/4un9tnxy/2/
Add margin-right: -1px; also.
span {
border: 1px solid black;
margin-right: -1px;
}
<span>a <span>b <span>c</span></span></span>
It's kind of ugly code but something like this might help you:
https://jsfiddle.net/4un9tnxy/4/
span {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
span span span:last-child {
border-right: 1px solid black;
}
To reflect what you mentioned in the comment below, here is a slightly more generic version: https://jsfiddle.net/4un9tnxy/6/
span {
border-top: 1px solid black;
}
/* for spans inside of spans */
span span {
border-right: none;
}
Related
I have a table.matrix in a div.matrix-wrapper.
The whole thing shall be centered in a bigger div.
I only achieved this by adding display: table; margin: 0 auto; to the wrapper.
(Adding the auto margin to the table is not an option, because of the gray border.)
On its own, the result looks the way I expect. (left)
But when I place it within a table, It looks like the wrapper has a padding. (middle)
When I remove display: table; from the wrapper, the pseudo padding goes away,
but then the centering does not work anymore. (right)
(External links removed.)
Based on the answer given by Alohci, I added this simplified example:
.green {
width: 80px;
height: 50px;
border: 2px solid #0d0;
}
.red {
display: table;
margin: 0 auto;
border: 2px solid red;
}
.blue {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid yellow;
background-color: blue;
}
table {
border: 3px solid black;
border-spacing: 5px;
margin: 20px 0;
}
table td {
border: 3px solid gray;
color: gray;
padding: 5px;
}
<h2>plain boxes</h2>
<p>The red box wraps directly around the blue box with the yellow border.</p>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
<h2>boxes in table</h2>
<p>The red box inherits border-spacing from the surrounding table.</p>
<table>
<tr>
<td>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
</td>
</tr>
</table>
<h2>plain table</h2>
<table>
<tr>
<td>plain</td>
<td>table</td>
</tr>
</table>
border-spacing and border-collapse inherit. The wrapping table has
border-spacing: 2px;
border-collapse: separate;
applied to it through the user-agent stylesheet, so these values are inherited by your div.matrix-wrapper and have effect when it's given display:table.
To remove the "padding", just set the div.matrix-wrapper to border-spacing: 0px.
I have a HTML Table with 2 columns and about 80 rows, which contains Acronyms, and their meanings.
Is there a (CSS?) way to display just the first row of the table, and have the meaning (i.e. it's accompanying td in the same tr) come up in some sort of box on mouseover?
This question has been asked before, but yes. You can.
JSfiddle
CSS:
.meaning {
display:none;
}
.Acronym:hover + .meaning {
display:unset;
}
HTML:
<table>
<tbody>
<tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr>
<tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr>
</tbody>
</table>
This is possible with only css using the :hover selector.
Here is an example of a cell with a tooltip, each .cell can be a <td> in a table.
Codepen
html
<span class="cell">
acr.
<div class="tooltip">Acronym</div>
</span>
css
.cell {
border: 1px solid black;
padding: 5px 10px;
}
.cell .tooltip {
position: absolute;
opacity: 0;
transition: opacity 250ms;
border: 1px solid grey;
background-color: white;
padding: 2px;
}
.cell:hover .tooltip {
display: block;
opacity: 1;
}
When using the rules attribute on this table element
<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">
I get the following warning:
Attribute (rules) is obsolete. Its use is discouraged in HTML5 documents.
What is the HTML 5 alternative for this?
From here
What does <table rules=""> do?
Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead.
So there is no HTML5 alternative, just CSS alternative:
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 15px;
}
table td {
text-align: center;
}
.frame-box {
border: 1px solid black;
}
.frame-void {
border: none;
}
.rules-none td {
border: none;
}
.rules-all td {
border: 1px solid black;
}
.rules-all td:first-child {
border-left: none;
}
.rules-all td:last-child {
border-right: none;
}
.rules-all tr:first-child td {
border-top: none;
}
.rules-all tr:last-child td {
border-bottom: none;
}
.rules-cols td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.rules-rows td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.border-2,
.border-2 td {
border-width: 2px;
}
"<TABLE BORDER=2 RULES=NONE FRAME=BOX>"
<table class="rules-none border-2 frame-box">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 FRAME=VOID RULES=ALL>"
<table class="border-2 frame-void rules-all">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=COLS FRAME=BOX>"
<table class="border-2 frame-box rules-cols">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=ROWS FRAME=BOX>"
<table class="border-2 frame-box rules-rows">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
HTML 5 demands that you replace the rules attribute with CSS attributes.
Source: https://www.w3schools.com/tags/att_table_rules.asp
This question already has answers here:
CSS: Make border on pure-CSS arrow
(5 answers)
Closed 7 years ago.
I have four div styles that I need to use: one with no arrows, a right arrow, a left arrow, and both right and left arrows. I want the arrowed divs to have a border surrounding them that matches the div with no arrows. These divs need to be the same exact height and width and the borders need to all match. You'll notice in my code I DO specify a border for the arrowed divs and it's the same color as the background color. I only have that as a placeholder and to make the sizes of the divs the same. I also know that the border on the arrowed divs will specify the darker color on 2-3 sides of the div and the background color on 1-2 sides of the div (and I do know how to do that).
My real question is how do I accomplish that border on just the arrow part? I'm looking for a CSS ONLY solution. I've seen solutions of adding another div and making the arrow 1px (or whatever width) larger to simulate a border but I was hoping to avoid the extra markup. I also realize there are other solutions to making the arrow itself. I'm not opposed to another arrow solution that is CSS ONLY if it helps with this border issue, or even one that works better (I didn't want to use JS to accomplish this, though I know it's possible). My CSS and sample HTML follows:
div.occurrence-wrapper {
position: relative;
margin: 0.1em 0.2em;
}
div.full {
border: 0.1em solid #88b7d5;
background-color: #c2e1f5;
position: relative;
height: 1.4em;
overflow: hidden;
}
div.flow-prev > div.full,
div.flow-next > div.full {
border-color: #c2e1f5;
}
div.flow-prev > div.full {
margin-left: 0.7em;
}
div.flow-next > div.full {
margin-right: 0.7em;
}
div.flow-prev:before,
div.flow-next:after {
content: "";
height: 0;
width: 0;
padding: 0;
margin: 0;
top: 50%;
border: solid transparent;
border-color: rgba(136, 183, 213, 0);
position: absolute;
pointer-events: none;
border-width: 0.7em;
margin-top: -0.7em;
}
div.flow-prev:before {
right: 100%;
border-right-color: #c2e1f5;
margin-right: -0.7em;
}
div.flow-next:after {
left: 100%;
border-left-color: #c2e1f5;
margin-left: -0.7em;
}
<table>
<tbody>
<tr>
<td>
<div class="occurrence-wrapper">
<div class="full">No arrows</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="occurrence-wrapper flow-prev flow-next">
<div class="full">Both arrows</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="occurrence-wrapper flow-prev">
<div class="full">Left arrow</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="occurrence-wrapper flow-next">
<div class="full">Right arrow</div>
</div>
</td>
</tr>
</tbody>
</table>
You can achieve that using a pseudo-element and transform.
div {
position: relative;
width: 150px;
height: 40px;
background: crimson;
border: 2px solid navy;
}
div:before {
content: "";
position: absolute;
height: 29px;
width: 29px;
transform-origin: 0% 0%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
right: -33px;
top: -2px;
background: crimson;
border-top: 2px solid navy;
border-right: 2px solid navy;
}
<div></div>
FIDDLE
You can create it by becore after css....
below the HTML code is...
<div class="myDiv">This Is My Div</div>
<div class="myDiv right">This Is My Div</div>
<div class="myDiv left">This Is My Div</div>
<div class="myDiv left right">This Is My Div</div>
below the css code is...
.myDiv{
padding:5px 10px;
background:#333;
color:#FFF;
width:120px;
position:relative;
height:30px;
margin-bottom:20px;
}
.myDiv.left{
margin-left:20px;
}
.myDiv.left:before{
content:" ";
width:0px;
background:transparent;
height:0;
position:absolute;
top:0;
left:-40px;
border-right: 20px solid #333;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.myDiv.right:after{
content:" ";
width:0px;
background:transparent;
height:0;
position:absolute;
top:0;
right:-40px;
border-left: 20px solid #333;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
}
You can visit the jsfiddle live demo.
To add a border around what appears to be an additional image (supporting transparency) to make the arrow on either side of a typical box, you need to create another image showing the border, because CSS does not handle shapes like triangles to create borders over. This only works on rectangles.
I am wondering if a border like this would be possible in pure css? There will be no content within this box, only an image within the future.
I would like to achieve this in pure CSS, with no jQuery. I have looked around and it seems it isn't really possible, however with CSS constantly evolving I was wondering if it was possible apart from using nested divs etc.
Cheers!
You can fake it. Like this jsFiddle example.
HTML
<div id="wrapper">
<div id="top"></div>
<div id="bottom"></div>
<img src="http://www.placekitten.com/200/100" />
</div>
CSS
#top, #bottom {
width: 200px;
height:50px;
position:absolute;
left:-1px;
}
#bottom {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
bottom:0;
}
#top {
border-left: 1px solid #f00;
top:0;
}
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
}
You can do it with only one div if you use pseudo elements. jsFiddle here
HTML:
<div id="wrapper">
<img src="http://www.placekitten.com/200/100" />
</div>
CSS:
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
border-left: 1px solid #f00;
border-bottom: 1px solid #f00;
}
#wrapper::before {
content: " ";
position: absolute;
width: 100%;
height: 50%;
bottom: -1px;
right: -1px;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
}
Just for the 'think' of it, you could also just stick a small graphic at the bottom right of a div (as a background image) and use a border on the left and bottom. Still just manipulating it via css with one small graphic but at least the height and width would be dynamic and not stuck as if using a full image.
Would also avoid A LOT of extra mark-up and css. 1 div, 1 css declaration and 1 small image.