How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5.
I am looking to create visually distinct rows where the background is visible in between each row.
Click here to view the image reference.
To add space between elements in a table, padding can be used effectively. If you are looking for guidance on specifying table padding in CSS (not cell padding), check out this helpful resource: How do you specify table padding in CSS? ( table, not cell padding )
If you need to display a list of products without using a datatable, here is a simple example to get you started:
body{
margin:0;padding:0;
}
.table{
background-color: #3f4a6c;
height:100vh;
width:100vw;
flex-direction:column;
display: flex;
justify-content:center;
align-items: center;
}
.table .product{
min-width: 150px;
overflow:hidden;
border: 1px solid #969aaa;
background-color:#ffffff;
border-radius: 10px;
display:flex;
align-items:center;
margin-bottom:10px;
}
.product img{
padding:5px;
}
.product span {
min-width:200px;
margin-left: 20px;
}
.product.active span{
color:#7e7edd;
font-weight:bold;
}
.product .more{
width:70px;
display:flex;
justify-content:center;
margin-left:20px;
height:100%;
box-shadow: -12px 0px 10px 0px #f2f2f2;
}<html>
<body>
<div class="table">
<div class="product active">
<img src="https://via.placeholder.com/40"/>
<span >Lorem ipsum</span>
<div class="more"><img src="https://via.placeholder.com/15"/></div>
</div>
<div class="product">
<img src="https://via.placeholder.com/40"/>
<span>Lorem ipsum</span>
<div class="more"><img src="https://via.placeholder.com/15"/></div>
</div>
<div class="product">
<img src="https://via.placeholder.com/40"/>
<span>Lorem ipsum</span>
<div class="more"><img src="https://via.placeholder.com/15"/></div>
</div>
</div>
</body>
</html>My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...
I have an unordered list with icons styled using Twitter Bootstrap 3. The Carme font from Google Fonts is used for normal text, and works well in that context. However, when I add icons to the unordered list using BS3, the font-family of that particular ...
I have customized a version of the Jekyll GitHub page from here and am trying to incorporate Computer Modern Serif font as the main body font across all pages. Following instructions from an informative answer, I have downloaded the necessary files from th ...
Despite the aurelia-validator plugin working correctly for form submission and validation, with all properties updating properly, the UI does not reflect any changes. There is no red outline around incorrect properties or error messages displayed. I have r ...
Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...
I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written: @media(max-width:767px) { $height: auto; $grid: 1; } @media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; } @media(min-width: 9 ...
I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...
Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...
When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...
Looking for a solution to modify my code so the output is just "Bothell" without the comma and count part. let As = document.getElementsByTagName('a'); let towns = new Map(); for(let a of As) { let town = a.textContent.split(',') ...
Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...
In my CSS, I am aligning two parts of a list item to the left and right side like this: ul li div.left { float: left; } ul li { text-align: right; } <ul> <li><div class="left">On the left</div>On the right</li> ...
I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...
Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. https://i.sstatic.net/2kNk3.png code .html <div class="margin-top-4 ...
[Technology]: Python + Selenium I am currently attempting to upload a local file using the upload file button. Initially, I tried to locate the element and click on the button, which was successful with the following code: driver.switch_to_frame("upload ...
{% extends "layout.html" %} {% block app_content %} <div> {% from "_formhelpers.html" import render_field %} <form method="post" enctype="multipart/form-data"> <div class = "container"> < ...
Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...
Looking for a solution: elem transform translateY(5px) scale(1.2) I want the element to move down an extra 5px on hover elem:hover transform translateY(5px) Is there a way to achieve this without knowing the previous state of the transform? Appr ...
As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...
I have created an intricate SVG file containing 35 different paths resembling train tracks. My next step is to break down these paths into 16 segments, allowing another SVG path (train) to smoothly traverse along them. The ultimate goal is to grant users ...