My table resembles the one shown in this example
I am looking to eliminate the gap between each "Previous" and "Current" cell pairs while still maintaining spacing between rows and other columns. Is there a way to achieve this?
My table resembles the one shown in this example
I am looking to eliminate the gap between each "Previous" and "Current" cell pairs while still maintaining spacing between rows and other columns. Is there a way to achieve this?
The current markup does not allow for separating borders using the CSS properties border-spacing and border-collapse. These properties only apply to entire tables or inline-table elements, not individual parts of a table.
If you need to display pieces of data side by side with separated borders, you could merge cells and manipulate the structure of your table. However, this workaround would compromise the semantics of your table layout.
Create a faux effect using padded cells and nested divs that can be styled differently.
Check out the example here
Please be aware that excessive padding on the cells may distort the gradient appearance.
I have customized some div elements by adding new styles to them. Below you will find the complete code snippet. I have designed it for only 2 rows but you can easily adjust it based on your requirements.
<html>
<head>
<style>
.dash-table {
width: 100%;
border-collapse: separate;
border-spacing: 10px;
}
.dash-table td,
.dash-table th {
font-size: 16px;
padding: 10px;
line-height: normal;
text-align: center;
font-weight: bold;
}
/* Custom Styles */
.dash-prev {
border-radius: 10px 0px 0px 10px;
width: 25%;
}
.dash-curr {
border-radius: 0px 10px 10px 0px;
}
.dash-actual {
font-size: 14px;
}
/* Colors */
.dash-blue, .dash-green, .dash-amber, .dash-red {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-top: 10px solid #fff;
}
/* More Styling For Different Colors */
.divLeft {
float: left;
width: 50%;
padding-top: 14%;
}
</style>
</head>
<body>
<table class="dash-table">
<thead>
<tr>
<th></th>
<th colspan="2">Global</th>
<th colspan="2">GB</th>
<th colspan="2">US</th>
<th colspan="2">RW</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>#</h2></td>
<td class="dash-prev dash-blue">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
<td class="dash-prev dash-green">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
<td class="dash-prev dash-amber">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
<td class="dash-prev dash-red">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
</tr>
<tr>
<td><h2>#</h2></td>
<td class="dash-prev dash-blue">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
<td class="dash-prev dash-green">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</td>
<td class="dash-prev dash-amber">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
<td class="dash-prev dash-red">
<div class="divLeft">
Previous hour<br><h2>#</h2>
</div>
<div>
Current hour (projected): <h2>#</h2><br>
<span class="dash-actual">Actual: #</span>
</div>
</td>
</tr>
</tbody>
</table>?
</body>
</html>
Feel free to review the outcome and let me know if there are any concerns.
To enhance the padding effect, I suggest incorporating additional cells and experimenting with them. Feel free to explore the code in this demo
One option is to utilize a nested table within a table for your layout. While it may not be the most elegant solution, it can get the job done. In this example, I have only implemented this approach in the first cell.
Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...
A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...
Currently, I am working on a collaborative project with two acquaintances. One of the requirements is to stick to either vanilla JavaScript selectors like document.getElementById("thisDiv"); or jQuery selectors such as $("#thisDiv"); to maintain consis ...
I am currently working on building a webpage with bootstrap3, but I have encountered an issue with the navigation bar. I would like the navigation links ("Web Design", "Development", "Photography", "Blog") to be evenly spaced out within the horizontal na ...
How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...
I'm looking for a code snippet that can: create a sine wave (an array of samples) play the wave This should all be accomplished in a web browser using an HTML5 API in JavaScript. (I've tagged this with web-audio, but I'm not entirely ...
How can I create a "scroll to top" button at the bottom of my page that smoothly scrolls to the top? Despite using an "animate({scrollTop})" script, the scroll animation is not working and it jumps directly to the top. This is the script I am using: $(&a ...
I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...
Below is the code that I have written on my HTML page: <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@name" /> <meta name="twitter:title" content="Twitter - image share" /> <meta name="twi ...
After trying various solutions like "background-clip: padding-box;" to address the issue of background color bleeding outside of the border, I'm still not completely satisfied with the result. Is there a more effective fix for this problem? Check out ...
I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...
Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...
I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...
When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...
Can anyone explain why I am getting names without the added selected field??? I can fetch names from my API JSON (1) and I'm attempting to modify it by adding the selected field (2). export default function Display() { ... const init ...
I'm facing a challenge when working with dynamic elements in jQuery and I really could use some help. Let me provide an example from my current project: main.js $(function () { renderPlaceList(places); setupVoting(); } The two functions are ...
To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...
After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...
On my webpage, I have three HTML5 videos all on one page. My goal is to be able to pause or mute all the videos at once, except for the one that I specifically choose. Initially, I tried using an event listener on the parent div which worked well when clic ...
Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...