Could you please assist me in identifying what this design element is called? I have tried searching on Google, but had no luck finding exactly what I am looking for.
Here is an example of the look I am aiming for:
https://i.sstatic.net/AXUvq.jpg
Can someone help me achieve this style or provide information on what it is called?
If there is only one content item, then there should be no border displayed.
Also, just to note, I am using the div tag and not the table tag.
This code snippet was originally sourced from CodePen but has been customized to meet your specific requirements.
page.html
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
page.css
.cell {
border-collapse: collapse;
border: 1px solid #000;
padding: 5px;
}
.cell span{
background-color: #000;
color: #fff;
display: block;
padding: 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}
Take a look at the screenshot
Have a look at this unique example showcasing a table with inner borders only, removing the outer borders.
.cell {
border-collapse: collapse;
border: 1px solid pink;
padding: 5px 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>Referenced from https://codepen.io/sirinity/pen/dDsLx
Here is a method using only pure CSS. I hope this solution proves to be helpful.
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}
.wrapper {
width: 50px;
height: 50px;
padding: 5px;
border: 0 solid;
}
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
background-color: #030;
}
.wrapper:nth-of-type(odd) {
border-right-width: 1px;
}
.wrapper:nth-of-type(odd), .wrapper:nth-of-type(even) {
border-bottom-width: 1px;
}
.wrapper:last-child, .wrapper:nth-last-of-type(-n+2):not(:nth-child(even)) {
border-bottom-width: 0;
}<div class="container">
<div class="wrapper"><div class="content">1</div></div>
<div class="wrapper"><div class="content">2</div></div>
<div class="wrapper"><div class="content">3</div></div>
<div class="wrapper"><div class="content">4</div></div>
<div class="wrapper"><div class="content">5</div></div>
<div class="wrapper"><div class="content">6</div></div>
<div class="wrapper"><div class="content">7</div></div>
</div>If you want to achieve this using css pseudo-classes, it is totally doable
For more detailed information, check out: Css pseudo-classes
Your HTML structure remains the same:
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>
In your css file:
.table {
border-collapse: collapse;
border-style: hidden;
}
.cell {
padding: 5px 10px;
}
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Explanation for the css styling:
To add top borders, we skip the first row:
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
Then, only apply borders to odd cells:
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Check out the code implementation here: Code here
I hope this explanation helps you in achieving your desired design.
Update: I apologize for missing the fact that you are not utilizing table tags. In that case, follow Hải Bùi's solution as my css code is specifically tailored for tables.
I am facing an issue with my absolutely positioned <div> (which serves as a menu) located in the corner of a webpage. The problem arises when I try to animate it on hover, but as soon as the cursor moves beyond the viewport, the hover action stops. I ...
I've been trying to save latitude and longitude values in PHP variables, but I'm having trouble. Here is the code I'm using. Can anyone please help me figure out why these values are not being stored in PHP variables: Code: <!DOCTYPE h ...
When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...
My current project involves hosting an HTML file as a website on AWS S3 in order to circumvent the CORS Policy. However, when I uploaded all my files into a new bucket, the HTML file was able to open but without accessing the accompanying CSS and JavaScrip ...
I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...
I cannot wrap my head around the fact that my svg viewBox acts differently in html compared to vuejs. Here is my code in vue: <template> <div class="venuecontainer" style="background-color:#808040;"> <svg class=&quo ...
Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...
I have placed my style.css in the directory appname/static/appname/. In my settings.py, this is what I have: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static/"), ) When I try to load it in my base.html like t ...
I have a main container with three different sub-containers, each containing an image and text. I want to achieve the effect of zooming in on the image of the specific sub-container when hovering over it. Currently, when I hover over any sub-container, all ...
I am currently working on developing my personal news website called News Pews. This is my third project, and I have encountered an issue that was not present in my previous projects. The problem arises when I apply position: fixed; top:0; to the header c ...
Let's discuss a scenario where we have a React component that takes a string as a prop: interface MyProps { myInput: string; } export function MyComponent({ myInput }: MyProps) { ... return ( <div> {myInput} </div> ...
Currently, I am working on form serialization in order to send the file name to the server. However, I have encountered an issue where the serialization values are empty and I am expecting the file name to be included. Within my form, there is an HTML fil ...
https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...
I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...
As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, ...
I need assistance in printing the text entered in a textarea with different colors. I am separating the string using the split() method, which works fine. However, I now want to print the substrings in the textarea with colors. How can this be achieved? & ...
My goal is to fill the canvas with a black color. The code I have used for this purpose is as follows: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.fillRect(0,0,c.width,c.height) ...
I am in need of an accordion list implementation for the given HTML code. I specifically want it to expand when 'Technical' is clicked, and collapse upon clicking again. Here is the HTML code: <!-- Techincal --> <div class= ...
My HTML5 video app includes a combination of video, a JavaScript swipable playlist, and other animated overlays. When using the app on iOS, the performance of playlist swiping and overlay animations is great upon initial load. However, after playing a vid ...
I operate a website called MyMobPrice and utilize OsClass for its functionality. However, I am encountering an error on each product page stating "More than One H1 Tag found." The issue lies within the two sets of H1 codes designed for desktop and mobile ...