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.
When I search online, most solutions only consider the viewport and/or the first parent container that is scrollable when trying to determine if a div is visible. However, I am wondering if there is a foolproof method to check if a div is truly visible t ...
When attempting to load the has-error class from Bootstrap using ng-class with a condition on a variable injected to the controller from my factory, I encounter an issue where even though the initial value of the variable is false, the has-error class load ...
Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...
Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...
I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...
1: In my database I have a hierarchical table of categories: 2: I created a PHP script to convert this table into HTML: 3: The resulting HTML code is as follows: <script> function toggleSubCategories(button) { ...
I'm in the process of developing a web application for my current university workplace. Currently, I am seeking guidance on how to create a dynamic user input form for our website using asp.net and c# in visual studio 2017. I'm struggling a bit w ...
Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...
I am currently developing a project that allows users to input SQL queries with parameters. These queries will be executed at specified intervals determined by the user (e.g., every 2 hours for 6 months), and the results will be sent to their email address ...
Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...
I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...
Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...
Hello, I am currently working on a project where I want to display a specific div portion when a user clicks on an image icon within a table. However, I am encountering an issue with the JavaScript code as it only shows the div portion in the first row and ...
I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...
When a button on my HTML page is clicked, I want to execute the command python abc.py in the Windows command prompt. The python file is stored at C:/abc.py. I'm looking for guidance on how to code the HTML page to achieve this functionality. Any assis ...
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 ...
Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...
With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...
I am trying to implement a searchable list of buttons on my website, but I haven't been able to find a solution that fits exactly what I have in mind. Currently, I have a list of buttons coded as inputs and I want to add a search field that will filte ...
After spending all day researching flexbox and vertical align, I still can't figure out how to align an image to the right in my bootstrap column with text wrapping around it on the left. Check out what I've tried so far here: https://codepen.io/ ...