The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied:

width: auto;
min-width: 98.5%;

When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking in Chrome's Developer Tools (F12), both styles are applied without any crossing out.

.containing > table {
position: relative;
left: 0;
margin-right: 0;
top: 0;
border: 1px solid #DDD;
width: auto;
min-width: 98.5%;
margin-bottom: 1em;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

HTML:

<div class="containing">
<table>

</table>
</div>

Answer №1

When styling tables, be sure to define border radius separately instead of within the table itself.

Consider defining border and border radius properties within the div container as shown below:

For a live example, refer to: http://jsfiddle.net/RfWWh/

Adjust these settings according to your design requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...

How to use Selenium WebDriver in Python to upload a file using a hidden input field

Html: <div id="js-cert-file" class="form-group"> <button id="js-ob-browse-n-upload" class="btn btn-ob browse-and-upload-onboarding-ssl-button" style=""> BROWSE & UPLOAD </button> <input id="js-cert-file" class="hidden btn btn-ob" ...

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

Locate an element that is nested within a "concat(" XPATH using Selenium

Embarking on my inaugural project as a Python developer, I am currently in the process of web scraping a retail website. The challenge lies in the fact that the site features infinite scrolling functionality, although at times instead of triggering the inf ...

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Is there a way to create a 3-row list with horizontal scroll without the unwanted space between items? I've been using tailwindcss and grid to achieve this layout, but I'm encountering issues with spacing: https://i.stack.imgur.com/WeRyQ.png Cu ...

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the wind ...

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

I am facing an issue with a Bootstrap 3 web page. Some machines have IE configured to load intranet pages in Enterprise profile mode, while others have the default Desktop profile set in IE11. This configuration has caused the layout to break completely. ...

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

Can a jumbotron and navigation bar be permanently attached to the top of a screen?

Currently, I am in the process of constructing my website using Bootstrap and my goal is to ensure that the header and navigation bar remain fixed at the top of the page while the content below scrolls underneath. While I am aware that it is possible to fi ...

Avoiding Backbone Routing Conflicts when Implementing CSS3 Targeting

I have implemented a CSS target to create some basic animation in my Backbone project. However, I am facing an issue where the method I am currently using adds a #banner to the URL, which Backbone tries to interpret as a route if users refresh the page aft ...

Designing divs that intersect

Struggling to replicate a design due to issues with the overlay section. I have separate divs for the menu bar, globe, and header text but positioning them as overlays is proving problematic. Attempted to use zIndex without success. https://i.sstatic.net/ ...

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

What is the significance of the space between form.validate and .ng-invalid-email.ng-dirty?

I'm currently working on an AngularJS application and I'm confused about the spacing between "form.validate" and ".ng-invalid-email.ng-dirty" in the stylesheet code below: <style> form.validate .ng-invalid-required.ng-dirty {background ...

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

jQuery: Eliminate the inline display property of "none"

Trying to figure out how to remove inline styles added by jQuery on hover from the current menu item in the navigation. I want the current menu item to remain visible even after hover, but jQuery is setting it to display:none. I attempted to add "display: ...

Utilize jQuery to animate the hiding of my right sidebar

Looking for help with implementing a jQuery animation to hide the right sidebar on my 3-columns page. I created a demo online here - JsFiddle: http://jsfiddle.net/yhfXX/ In my template, the columns are arranged as follows: menu (on the left) is fixed co ...

Customizing Paths in Express Handlebars

I have a query regarding setting up custom folders in Express.js Here's my situation: I need to implement logic where if a specific name is present in my database, the paths for CSS and JS files should be altered before rendering. By default, my pat ...