Is it feasible to create a table with diagonal borders using CSS or jQuery, similar to the one shown below?
I would welcome any ideas on how this can be achieved.
Is it feasible to create a table with diagonal borders using CSS or jQuery, similar to the one shown below?
I would welcome any ideas on how this can be achieved.
With some creative thinking and CSS skills, the possibilities are endless. Take a look at this example where we've played around with borders:
.arrow_box:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
We can also achieve interesting effects like rotating elements using CSS3:
-webkit-transform: rotate(26.5deg);
-moz-transform: rotate(26.5deg);
-ms-transform: rotate(26.5deg);
-o-transform: rotate(26.5deg);
transform: rotate(26.5deg);
Alternatively, you could opt for using an image as the background for your table.
Although traditionally a table is not designed to have diagonal borders, there are CSS tricks that can create the illusion of diagonal borders. Below is an example code snippet:
.borderdraw {
position:absolute;
border-style:solid;
height:0;
line-height:0;
width:0;
z-index:-1;
}
table td
{
width:60px;
max-height:55px;
border:1px solid #000;
}
.tag1{ z-index:9999;position:absolute;top:40px; }
.tag2 { z-index:9999;position:absolute;left:40px; }
.diag { position: relative; width: 50px; height: 50px; }
.outerdivslant { position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 50px 0px 0px 60px;}
.innerdivslant {position: absolute; top: 1px; left: 0px; border-color: transparent transparent transparent #fff; border-width: 49px 0px 0px 59px;}
</style>
<table>
<tr>
<td>
<div class = "tag1">Tag1</div>
<div class="tag2">Tag2</div>
<div style="z-index:-1;">
<div class="diag">
<div class="outerdivslant borderdraw">
</div>
<div class = "innerdivslant borderdraw">
</div>
</div>
</div>
</td>
</tr>
</table>
The above code will generate diagonal-like borders on your table.
Feel free to try it out and see the output for yourself.
Check out this CSS example of a table with borders and diagonal lines: CSS Table Example
table {
width: 100%;
}
table td {
position: relative;
overflow: hidden;
border: 1px solid #000;
}
.line {
position: absolute;
height: 40px;
top: 40px;
bottom: 0;
margin: auto;
left: -5px;
width: 100%;
border-top: 1px solid #000;
-webkit-transform: rotate(14deg);
-ms-transform: rotate(14deg);
transform: rotate(14deg);
}
.diagonal {
width: 150px;
height: 40px;
}
.diagonal span.lb {
position: absolute;
bottom: 2px;
left: 2px;
}
.diagonal span.rt {
position: absolute;
top: 2px;
right: 2px;
}<table>
<tr>
<td>abc</td>
<td>abc</td>
<td class="diagonal">
<span class="lb">Average</span>
<span class="rt">Total</span>
<div class="line"></div>
</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>Diagonal table borders are not supported, but you can achieve a similar effect by using a div element with a single border and rotating it using CSS3.
Utilizing CSS for creating a diagonal line effect with linear-gradient and positioning internal cells using CSS transform:
td {
padding: 30px;
border: 2px solid black;
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(49%, white), color-stop(50%, black), color-stop(51%, white));
background-image: -webkit-linear-gradient(bottom left, white 49%, black 50%, white 51%);
background-image: -o-linear-gradient(bottom left, white 49%, black 50%, white 51%);
background-image: linear-gradient(to top right, white 49%, black 50%, white 51%);
}
td .c1 {
-webkit-transform: translate(20px,-20px);
-ms-transform: translate(20px,-20px);
transform: translate(20px,-20px);
}
td .c2 {
-webkit-transform: translate(-20px,20px);
-ms-transform: translate(-20px,20px);
transform: translate(-20px,20px);
}<table border=1>
<tr>
<td>
<div class="c1">Foo</div>
<div class="c2">Bar</div>
</td>
</tr>
</table>Alternatively, another approach proposed by Peter Krautzberger involves using an SVG image for the diagonal line and Grid Layout in CSS to position internal cells:
.cell {
display: grid;
width: max-content;
justify-content: space-between;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
border: 1px solid #000;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
background-size: 100% 100%;
}
.cell--topRight {
grid-column-start: 2;
text-align: right;
}
.cell--bottomLeft {
grid-column-start: 1;
}<table border=1>
<tr>
<td class=cell>
<div class="cell--topRight">Foo</div>
<div class="cell--bottomLeft">Bar</div>
</td>
</tr>
</table>$(".myButton").click(function () { // Set the effect type var effect = 'slide'; // Set the options for the effect type chosen var options = { direction: $('left').val() }; // Set the duration (default: 400 millise ...
How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...
Looking to properly format a date for use in a compare function to sort data $(xml).find("item").each(function () { var dateText = $(this).find("Date").text(); var year = dateText.substr(0,4); var month = dateText.subst ...
I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...
I've been working on a lot of code in the backend section of my website, mainly dealing with CRUD operations using AJAX calls. Do you have any suggestions on how I can refactor these functions into more generic ones or possibly create classes instead ...
Having trouble with my floating labels - any advice? https://i.sstatic.net/fk0CG.png Here is the code snippet: <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <la ...
I've implemented a code snippet for user login via Ajax. However, I'm facing an issue where the fade effects are overlapping with each other due to the quick processing of the request. Despite receiving data to display, I am stuck with just the " ...
I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...
Can anyone guide me on using jQuery UI for drag and drop to transfer data between multiple divs? I'm currently working with jQuery in conjunction with an asp.net core api. The task is similar to a calendar system where entries can be moved across di ...
Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...
What is the best way to display multiple <p> elements inline using Bootstrap? This is the code I have currently: <div className="container d-inline-flex"> <p className="text-nowrap"> This is sent ...
I am currently integrating Gson with JQWidgets in my project. In Step 1, I am utilizing the Gson API to send JSON data to the grid in the format specified below for it to display rows supported by JQWidgets. [ { "CompanyName": "Alfreds Futterkiste", "C ...
When deciding where to position a child element, should it be done within its own CSS scope or from the parent? In the scenario provided below, would it be more effective to use margin-left: auto; on the parent element or the child element (both options a ...
I'm having an issue with my Joomla component where it makes a jquery call (jquery.post) on button click and then populates the result in a textarea. However, when I submit the form to the backend, I am unable to fetch this data present inside the tex ...
I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...
My goal is to implement a jquery autocomplete feature with PHP, but I am facing an issue with the data structure required for each record in the autocomplete. Currently, I have successfully achieved this without PHP using the following code: $(function() ...
Struggling with the specificity of this particular CSS rule. Despite researching extensively, I still can't seem to grasp it. Can someone help me determine the specificity of the following: #sidebar h1, p em, p a:hover{ ... } ...
Currently, I'm facing an issue with displaying PHP and Javascript code within pre tags in a project. The problem arises as the code spills outside the boundary of the containing element. While inspecting the console, I am attempting to identify the so ...
Suppose you have: <div id="data" onclick="handleData(1)">Datum 1</div> and you prefer late binding instead: <div id="data">Datum 1</div> <script> $("#data").click(function() { handleData(1); }) </script&g ...
I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...