draw an arrow inside table cell using CSS
Using CSS Shapes and pseudo-elements:
HTML
<table>
<tr><td class="comment">Foo</td></tr>
</table>
CSS
* { margin: 0; padding: 0;}
td { border: 1px solid black; }
.comment:after {
content: "";
position: relative;
top: 0.5em;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
DEMO
Updated answer to fix wrapping:
/* add relative positioning to the td */
td { border: 1px solid black; position: relative; }
/* and absolute positioning for the triangle */
.comment:after {
content: "";
position: absolute;
/* left: calc(100% - 0.5em); */
/* use right: 0; instead */
right: 0;
top: 0;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
Fixed Demo
How to draw arrow in HTML table across cells?
You can do this dynamically by using a canvas element to contain your arrow, which you will dynamically draw via the 2D context drawing functions. You can absolutely position the canvas element using javascript.
Here is sample code:
HTML:
<canvas id="canvas" width="100" height="100">
</canvas>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</table>
Javascript:
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.style.top = 7 + "px";
canvas.style.left = 7 + "px";
var fromx = 0;
var fromy = 12;
var tox = 25;
var toy = 12;
var headlen = 10; // length of head in pixels
var angle = Math.atan2(toy-fromy,tox-fromx);
var arrowSize = 2;
var headlen = 10;
var angle = Math.atan2(toy-fromy,tox-fromx);
//starting path of the arrow from the start square to the end square and drawing the stroke
ctx.beginPath();
ctx.moveTo(fromx, fromy);
ctx.lineTo(tox, toy);
ctx.strokeStyle = "#cc0000";
ctx.lineWidth = arrowSize;
ctx.stroke();
//starting a new path from the head of the arrow to one of the sides of the point
ctx.beginPath();
ctx.moveTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));
//path from the side point of the arrow, to the other side point
ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));
//path from the side point back to the tip of the arrow, and then again to the opposite side point
ctx.lineTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));
//draws the paths created above
ctx.strokeStyle = "#cc0000";
ctx.lineWidth = arrowSize;
ctx.stroke();
ctx.fillStyle = "#cc0000";
ctx.fill();
CSS:
#canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
}
You can programmatically obtain the positioning information of your table elements in order to set the correct values for fromx, fromy, etc., and for setting canvas.style.top and canvas.style.left.
I borrowed the arrow drawing code from Draw arrow on canvas tag
css pure arrows inside td tag
What is your target audience with this? Most of the CSS techniques for drawing shapes like triangles involve things like insert new elements, and advanced CSS properties (read: don't work in IE), I would suggest biting the bullet and using an old-fashioned background image.
If you're doing it as a proof of concept, and you don't care what browser a visitor is using, have you looked at this tutorial on CSS tricks?
You would need to insert a <div> into those cells, and then apply styling like this:
.arrow div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Drawing arrows above HTML
With a bit of JavasSript and CSS you can achieve this without canvas or SVG. Here is an example:
function getPosition(el) { return { x: el.offsetLeft + el.offsetWidth / 2, y: el.offsetTop + el.offsetHeight / 2 }; }
function getDistance(a, b) { const from = getPosition(a); const to = getPosition(b);
return { //https://stackoverflow.com/a/17628488/529024 distance: Math.hypot(from.x - to.x, from.y - to.y), angle: Math.atan2(to.x - from.x, from.y - to.y) * 180 / Math.PI, position: { start: from, end: to } } }
function init(){// Get values and elements then set style const values = getDistance( document.getElementById("start"), document.getElementById("end") ); let wrapper = document.getElementById('wrapper'); let arrow = document.getElementById('arrow'); let bottom = wrapper.offsetHeight - values.position.start.y; arrow.style.height = values.distance + "px"; arrow.style.transform = `rotate(${values.angle}deg)`; arrow.style.bottom = bottom + "px"; arrow.style.left = values.position.start.x + "px";}
init();
window.addEventListener('resize', function(){ init();});#wrapper { position: relative; left: 50px; top: 100px;}
#arrow { position: absolute; width: 2px; background-color: red; transform-origin: bottom center;}
#arrow::before { position: absolute; height: 0px; width: 0px; border: 6px solid transparent; border-bottom: 8px solid red; content: ""; bottom: 100%; left: 50%; transform: translateX(-50%); }<div id='wrapper'> <div id='arrow'></div> <table> <tr> <td >0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td id="end">9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td id="start">0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table></div>Highlight corner of table cell - html/css
Use a linear-gradient
td { padding: 1em 3em; border: 1px solid grey; background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);}<table> <tr> <td></td> <td></td> <td></td> </tr></table>Styling intersection of internal table borders using CSS
How about something like this to get you started, or to give you ideas. It does use a bit of trickery, but no pseudo elements or extra graphics.
body { background: white;}
.grid { display: table; background: red; /* color of the dots */ empty-cells:show;}
.row { display: table-row;}
.row>div { display: table-cell; border: 0px solid; width: 10px; height: 10px; font-size: 0px; border-radius: 2px; /* size of the dots */ background: white;}<div class="grid"> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></div>Draw circle in middle of a table cell
Not sure if this helps but simply give your circle a high and width so it will always be the same size.
table { border-collapse: collapse;}td{ padding:5px; border:solid 1px #ccc; text-alig:}.circle{ background-color:blue; display:block; height:50px; width:50px; border-radius:50%; border:5px solid #000; margin:auto; color:#fff; line-height:50px; text-align:center }<table> <tr> <td>Some text</td> <td>Some Text</td> <td>some Text</td> <td> <span class="circle"> text </span> </td> </tr> <tr> <td>Some text<br>Some text Some text<br> Some text <br>text</td> <td>Some Text</td> <td>some Text</td> <td> <span class="circle"> text </span> </td> </tr></table>Related Topics
How to Add Linear-Gradient Color to Mui Chip Background
How to Get Multiple Borders with Rounded Corners? CSS
Create Clip-Path Wave CSS Edges
Clear Fix and Uncollapse Margins with CSS Without Side Effects
How to Custom Table Responsive Materialize
Getting Div to Occupy Full Cell Height
How to Animate a Svg Figure Like a Progress Bar with CSS
Css: Element Has 'Display: Block' and Doesn't Start a New Line
Hide Columns in a Table Using CSS
How to Use Pseudo-Elements (:After, :Before) Inside a Table Row
How to Maintain a Circlur Shape of Element with Dynamic Content
How to Create Vertical Text Using Only CSS
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths