Currently, I have a table where I am utilizing CSS to display a bottom border.
.inset {
border-bottom: 1px solid #dadce0;
}
I am aiming to have some padding on the left and right sides similar to using a
<hr align="center" width="80%">Are there any particular properties or CSS techniques that I should explore to maintain the table's structure while having a centered bottom border that occupies only 80% of the table width?
If you want your table to occupy 80% of the width of the page (with 10% left on both sides for the margins), you can center the entire table using the following CSS:
.inset {
border-bottom: 1px solid #dadce0;
width: 80%;
margin: 0 auto;
background-color: coral;
}
.inset td {
text-align: center;
}<table class="inset">
<tr>
<td>Row 1 - Cell 1</td>
<td>Row 1 - Cell 2</td>
<td>Row 1 - Cell 3</td>
</tr>
<tr>
<td>Row 2 - Cell 1</td>
<td>Row 2 - Cell 2</td>
<td>Row 2 - Cell 3</td>
</tr>
<tr>
<td>Row 3 - Cell 1</td>
<td>Row 3 - Cell 2</td>
<td>Row 3 - Cell 3</td>
</tr>
</table>To achieve the desired effect of having the bottom border outside of your <table> tags, one approach could be to wrap it in a div element, set its display property to flex, justify it to the center, and give it a width of 80%. This should help achieve the desired outcome. If this method does not work, you could also consider using the margin properties, such as margin-left: 10%;.
Without further insight into your HTML/CSS structure and how you have implemented your border, it is difficult to provide more specific guidance. Feel free to share more details for better assistance.
What do you think of this solution? It's all in CSS.
table {
width: 100%;
position: relative;
margin-bottom: 10px;
}
td {
border: 1px solid grey;
padding: 10px;
}
table:after {
content: '';
position: absolute;
width: 80%;
bottom: -10px;
left: 10%;
border-bottom: 2px solid red;
}<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Carrot</td>
</tr>
</table>https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...
Encountering an error indicating that this code snippet is not valid within an XSL file. This is the only feedback provided by the document system. While this code is a part of a larger document, I decided to isolate the issue to determine if it lies in ...
Is it safe to assume that if a property is set to auto, it cannot have the value of none, and vice versa? Or if a property has none, can it not have auto as well? I understand that these values have distinct meanings, but I am curious if this concept has ...
Starting off with ASP.net API, I am attempting to make AJAX calls from my HTML page to retrieve a list of products and search for specific products by their IDs. However, my GET request and the search by ID request do not seem to be functioning properly. ...
I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...
My attempt to use border-radius did not solve my issue. I am trying to create a circular background for a specific section of the page, as shown in the image. For my first inquiry: I only want the circular background at the top of the page, not the botto ...
Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...
Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...
I am attempting to replicate the Toggle open/close div effect shown in the sample image below: https://i.sstatic.net/geAQa.png Css: .area1 { width: 50px; height: 200px; background: red; display: inline-block; z-index:99; } .area2 { ...
One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...
In order to load an HTML page using the webview component and handle its functions, I am faced with a challenge. The HTML page contains a multi-object named (webkit.messageHandlers.adClicked). How can I utilize the webView.addJavascriptInterface() functi ...
My media query seems to be behaving oddly. @media only screen and (max-width: 1200px) { .tool-panel { margin: 0px 24px 0px 0px; } } It is getting applied at 1183.20px instead of 1200px. This discrepancy is consistent across all browsers ev ...
The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...
In my design, I have an image overlaid with a Play icon. The concept is that when the user hovers over the image, the brightness of the image decreases and the Play icon is replaced with a Magnifying Glass icon. However, there seems to be a problem. When ...
Is there a way to set the caret position in a contenteditable div layer? After trying different methods and doing some research online, I finally found a solution that works in firefox: function set(element,position){ element.focus(); var range= w ...
When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...
I need help with an HTML file containing a web page design featuring a form where users can enter their name. My goal is to create a six-entry array for each submission to store information for later use on another page. Would Django be the best tool for ...
Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the c ...
I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...
My error messages are displayed using innerHTML. How can I make them disappear once the error is corrected? Currently, they stay on, even after the error is fixed. I tried resetting them at the top of the script but it didn't work. Link to JSfiddle ...