Make the div's width equal to the width of the table inside

In one of my table cells, I have the following structure:

<td>
    <div class="table-wrapper">
        <table class="inner-table">
        <!--content-->
        </table>
    <div>
</td>

I added the div so I could create a border around the table with a 10px gap. However, when it displays, the div takes up the entire width of the enclosing td. What I actually want is for the div to be only as wide as the table it wraps (plus margin). I'm struggling to achieve this using CSS, although it should be simple. I managed to make it work with JavaScript, but I would prefer a CSS solution. Setting width:auto for the div didn't help.

css

Answer №1

To achieve this, one method is to implement inline-block

<style>
    .table-wrapper {
        border: 1px solid black;
        padding: 10px;
        display: inline-block; 
    }
</style>

<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
    <div class="table-wrapper">
        <table class="inner-table">
        <tr><td>INNER</td></tr>
        </table>
    <div>
</td>
</tr>
</table>

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

Is the background image on my class website too large?

I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...

htmlcssimage

Elevate your design game by mastering CSS transformations for precise element

I am trying to center a div with a variable width using the following code: div { background: red; max-width: 400px; position: absolute; left: 50%; transform: translateX(-50%); } Check out my demo here While this code works well for centering, ...

csscenteringtranslateresponsive

Issue with Top Bar not resizing properly when window is made smaller (HTML,CSS)

Hey there, I'm currently working on a website and encountering an issue with the top bar not resizing when the browser window is made smaller. I've tried looking for solutions on different websites but haven't had any luck. Any assistance yo ...

htmlcssweb

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

csstypesmaterial-ui

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Issue with unordered list item styling in CSS

Encountered a peculiar problem: Within my .cshtml file, there is another element: <ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Tes ...

htmlcss

What is the best way to adjust the spacing in my bootstrap Navbar? I am struggling to make it stretch to the entire width of the screen

I am currently working on a website project where I want to have a navigation bar that spans the full width of the screen with a black background. I also need the links to be centered and evenly distributed within the navbar. My main issue right now is re ...

htmlcssnavbarbootstrap-5spacing

Creating consistent web page designs: A guide

Having created multiple practice websites, I have successfully published one. However, I am now faced with the challenge of needing to make design changes. If I want to modify the text surrounding a certain element in every page, I find myself having to ...

phpjavascripthtmlcss

Ways to display scrollbar even when inner container lacks fixed height within a fixed position outer container

I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hid ...

htmlcssreactjsscrollbarcss-position

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

Tips for arranging Bootstrap thumbnails in a horizontal row

Could someone assist me with arranging Bootstrap thumbnails side by side instead of vertically stacked? Any advice is appreciated! Here is the current code snippet for the two thumbnails: <div class="row"> <div class="col-sm-6 col-md-4"& ...

htmlcssbootstrap-4

Creating an unordered list (ul) with list items (li) that extend the full width

Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a nav hover bar. .dropdown-b ...

htmlcss

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

javascriptphpjqueryhtmlcss

Display various DIV elements based on dropdown selection in Angular using ngModel

My webpage consists of three separate div elements: div1, div2, and div3. I am looking for a solution where div1 and div2 are displayed upon the first selection, div1 and div3 upon the second selection, and div2 and div3 upon the third and final selectio ...

htmlcssangularangular9angular12

show all the elements in a single row

My goal is to have two elements displayed in a single line. I tried implementing what I thought would work perfectly, but unfortunately, it's not quite right. Here's the issue: div#inline{ padding: 0; margin:0; display: inline-bloc ...

htmlcss

Mixing colors of boxes with CSS

https://i.sstatic.net/aHTv9.jpgI'm currently in the process of developing a website for fun, and I am interested in creating a visually appealing effect where 4 boxes are layered on top of each other and seamlessly blend into one another. However, I a ...

htmlcss

Why are my CSS styles not appearing on the canvas with html2canvas?

Currently, I am in the process of developing a script that allows for image manipulation and saving. I have a main div where I set a background image, within which there is another div containing an image that can be manipulated (resized, rotated, and dra ...

javascriptjquerycsshtml2canvas

How to make QWebView background translucent

My goal is to make the background of a QWebView element transparent. +---------------------------+ | x | Window title | <<< Hidden borders and title bar +---------------------------+ view->setWindowFlags(Qt::FramelessWindowHint); | ...

c++htmlcssqt