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>Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...
Is there a way to synchronize the bounce animation with the scaling of an object, so that it appears smooth and fluid? I've tried using the animation delay property along with the transition delay property, but they don't seem to align correctly. ...
These are some helpful comments to shorten and improve the readability of the code In my current project, I am using Javascript (Ajax) along with PHP (Laravel). I encountered an issue where I have set up two listeners in my ajax function. One listener is ...
Is there a way to create a voting system that appears on an image when hovered over with the mouse? For instance, take a look at the images in this widget: http://jsfiddle.net/4B2Bc/. I'm interested in having a thumbs up or thumbs down icon display w ...
$(document).ready(function(){ $('.clickthetext').click(function(){ $.post("submit.php", $("#formbox").serialize(), function(response) { $('#content').html(response); }); return false; }); ...
My current struggle involves meeting the requirements of my customers. I have a small box (230px x 200px) with an image that will display a list on hover. However, the customer now wants more items in the list than can fit in the box. Scrolling within the ...
My data structure includes a nested dict presented as follows: var dataSet = [{"s_group": [{"range_name": null, "name": "XXXXXXXXXXXX"}], "configfile": "XXXXXXXXXXX", "src_port": ["0-65535"], ...
Currently attempting to utilize JSONP in order to work around Cross Domain challenges. I referenced this solution: Basic example of using .ajax() with JSONP? $.getJSON("http://example.com/something.json?callback=?", function(result){ //response data a ...
Seeking assistance with my code to retrieve the selected value from ajax_details.php for submission in the form action process_details.php. Here is the code snippet: injury_details.php <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jqu ...
Currently, I am utilizing the Yahoo CSS reset and all my CSS is based on pixel values rather than relative units like ems. Interestingly, there seems to be a discrepancy in the position of the bottom right corner of the form-containing div between Chrome a ...
After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...
I am using jQuery Sortable and it's functioning well. However, I have encountered a small issue that I need help with. I have two blocks where elements from one block can be moved to the other. The problem arises when all the elem ...
Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...
I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...
Currently tackling the challenge of parsing some XML that is not properly formatted. The XML file contains un-escaped ampersands, which goes against the standard rules for XML files. My goal is to extract unicode formatted phrases from this XML file whil ...
In this interactive demonstration, you can see how jQuery can be utilized to create a terminal-like feature. This functionality ensures that as new items are added to a scrollable div, the scroll automatically locks at the bottom. Pay close attention to l ...
In my attempts to clear the file input field in IE using $('#files').val('');, I found that it was not effective. $('#uploadimgdiv').html(''); var fil1 = document.getElementById("files"); $('#fil1').val(&a ...
I am currently working on creating a custom plugin using the code below. I have encountered an error at the line if(options.controls == true) The specific error message says 'options is not defined'. How can I properly define this variable? ( ...
I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...
I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...