The property min-width is effective when used with table cells (td), however, it does not produce the

I originally used a table layout for my tabs, but now I need to switch to flex due to new style requirements. However, the min-width concept that worked with tables is not functioning properly with div.

In the example below, when you resize the page, the paddings on the left and right of the tab text resize (from 32px to 8px) in the table layout, but this behavior does not occur in the flex div layout.

div.table-container, div.flex-container {
    min-width: 100%;
    padding-bottom: 32px;
}

/* CSS code for table layout */

table {
    border-collapse: collapse;
}
/* More table styling here */

/* CSS code for flex layout */
div.flex {
    display: flex;
    gap: 4px;
}
/* More flex box styling here */
<div class="table-container">
    <table>
        <tr>
            <!-- Table tab structure -->
        </tr>
    </table>
</div>

<div class="flex-container">
    <div class="flex">
        <!-- Flex tab structure repeated for each tab -->
    </div>
</div>

htmlcssflexbox

Answer №1

My innovative approach involves just two additional CSS declarations to solve the issue at hand. The key is setting a max-width for the tab, although there could be complications if the number of tabs changes dynamically.

* {
  box-sizing: border-box;
}

div.tab {
  max-width: calc(20% - 3.2px);
}

Given that there are five tabs in total, each one should ideally occupy a maximum width of 20%. However, factoring in the gaps becomes crucial. With four spaces between tabs, each measuring 4px, this totals to 16px. Dividing this by the number of tabs and subtracting it from the original 20% value provides the desired result.

* {
  box-sizing: border-box;
}

div.table-container, div.flex-container {
  min-width: 100%;
  padding-bottom: 32px;
}

table {
  border-collapse: collapse;
}

td.left, td.right {
  min-width: 8px;
  width: 32px;
}

td {
  border-top: 1px solid black;
}
td.left {
  border-left: 1px solid black;
}
td.content {
  white-space: nowrap;
}
td.right {
  border-right: 1px solid black;
}
td.space {
  border-top: none;
  width: 4px;
}

div.flex {
  display: flex;
  gap: 4px;
}
div.tab {
  border: 1px solid black;
  border-bottom: none;
  display: flex;
  max-width: calc(20% - 3.2px);
}
div.left, div.right {
  display: inline-block;
  min-width: 8px;
  width: 32px;
}
div.content {
  white-space: nowrap;
}
<div class="table-container">
    <table>
        <tr>
            <td class="left"></td>
            <td class="content">Tab QWERTY</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Tab ABCDEF</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Tab ZXCVBB</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Tab POIUYT</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Tab LKJHGF</td>
            <td class="right"></td>
        </tr>
    </table>
</div>

<div class="flex-container">
    <div class="flex">
        <div class="tab">
            <div class="left"></div>
            <div class="content">Tab QWERTY</div>
            <div class="right"></div>
        </div>
        <div class="tab">
            <div class="left"></div>
            <div class="content">Tab ABCDEF</div>
            <div class="right"></div>
        </div>
        <div class="tab">
            <div class="left"></div>
            <div class="content">Tab ZXCVBB</div>
            <div class="right"></div>
        </div>
        <div class="tab">
            <div class="left"></div>
            <div class="content">Tab POIUYT</div>
            <div class="right"></div>
        </div>
        <div class="tab">
            <div class="left"></div>
            <div class="content">Tab LKJHGF</div>
            <div class="right"></div>
        </div>
    </div>
</div>

Answer №2

Utilizing the power of flex-grow/flex-shrink, min-width/max-width, I was able to accomplish my desired outcome:

div.table-box, div.flex-box {
    min-width: 100%;
    padding-bottom: 32px;
}

table {
    border-collapse: collapse;
}

td.left, td.right {
    min-width: 8px;
    width: 32px;
}

td {
    border-top: 1px solid black;
}
td.left {
    border-left: 1px solid black;
}
td.content {
    white-space: nowrap;
}
td.right {
    border-right: 1px solid black;
}
td.space {
    border-top: none;
    width: 4px;
}

div.flex {
    display: flex;
}
div.panel {
    border-top: 1px solid black;
}
div.left, div.right {
    display: inline-block;
    min-width: 8px;
    max-width: 32px;
    flex: 1;
}
div.left {
    border-left: 1px solid black;
}
div.right {
    border-right: 1px solid black;
}
div.content {
    white-space: nowrap;
}
div.gap {
    min-width: 4px;
    width: 4px;
}
<div class="table-box">
    <table>
        <tr>
            <td class="left"></td>
            <td class="content">Section Alpha</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Section Beta</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Section Gamma</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Section Delta</td>
            <td class="right"></td>

            <td class="space"></td>

            <td class="left"></td>
            <td class="content">Section Epsilon</td>
            <td class="right"></td>
        </tr>
    </table>
</div>

<div class="flex-box">
    <div class="flex">
        <div class="panel left"></div>
        <div class="panel content">Section Alpha</div>
        <div class="panel right"></div>

        <div class="gap"></div>

        <div class="panel left"></div>
        <div class="panel content">Section Beta</div>
        <div class="panel right"></div>

        <div class="gap"></div>

        <div class="panel left"></div>
        <div class="panel content">Section Gamma</div>
        <div class="panel right"></div>

        <div class="gap"></div>

        <div class="panel left"></div>
        <div class="panel content">Section Delta</div>
        <div class="panel right"></div>

        <div class="gap"></div>

        <div class="panel left"></div>
        <div class="panel content">Section Epsilon</div>
        <div class="panel right"></div>
    </div>
</div>

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

What is the best way to adjust a map to completely fill the screen?

I am experiencing an issue with my Openlayer map not fitting to full screen automatically. Despite trying various settings, I am unable to resolve this issue. Can anyone suggest what might be causing this problem? Thank you in advance https://i.stack.imgu ...

javascripthtmlcssreactjs

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

javascriptcssreactjsmaterial-ui

What is the process for adding personalized arrows to a slick slider that switches images when hovered over?

I'm currently utilizing the slick slider from . My goal is to have my custom arrows change appearance when hovered over. Below you will find the JavaScript code I've implemented to customize the left and right arrows within the slider. However, ...

javascriptcssslick.js

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

After writing a code using javascript/Youtube API + PHP to fetch a YT video ID from a MySQL server and place it in Javascript, I realized that the page only reloads when the tab is active and not when it's in the background. This issue disrupts the wh ...

javascriptphpjqueryhtmlgoogle-chrome

Strategies for preventing the appearance of empty rows associated with unused <tr> elements

I currently have multiple asp.net panel controls that I am displaying using an html table. These panels are initially set to visible = false, but depending on the data retrieved from the database, some of the panels will be made visible. The issue arises w ...

asp.nethtml

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Direct your attention to the cursor problem in Internet Explorer

Here is a snippet of code that automatically changes background images: function changeBackground() { currentBackground++; if(currentBackground > 3) currentBackground = 0; $('body').fadeOut(0, function() { $('body&ap ...

javascripthtmlcssfade

Unable to reach the dropdown menu in CSS

Having trouble with creating a dropdown navigation bar? I've encountered an issue where the dropdown menu disappears as soon as I move my cursor off the buttons that reveal it. The menu itself displays properly, but accessing the drop down menu is pro ...

htmlcss

How can you use the :not selector in CSS to target specific elements within a group?

Consider the following set of inputs: <div id="group"> <input id="uno" class="red"></input><br/> <input id="dos" class="red"></input><br/> <input id="tres" class="blue"></input><br/ ...

javascriptjqueryhtmlcssselector

Using CSS3 to Enhance the Look of Multiple Background Images

While I've come across similar inquiries, I haven't found a satisfactory explanation yet. My aim is to grasp the best CSS practices for implementing multiple repeating backgrounds. Essentially, I want a background image to repeat across the entir ...

htmlcss

Using a For Loop in VueJS with TypeScript for an array of objects

I'm currently working on a for loop within an object array. Below is the code snippet I am working with: private async rightsOverview() { let item: any[] = []; const prod = await fetchFromApi<ProductionBaseType>(`/productions/${id ...

javascripthtmltypescriptvue.jsvuejs2

Select a radio button when it is in focus

I am having trouble figuring out how to automatically check a radio button when a user clicks on an input field. The code I have attempted is not working as expected... $(function() { $('.searchInput').focus(function() { $(this).prev( ...

jqueryhtml

Ensuring the header retains its height by utilizing the <strong> element in Bootstrap

I'm currently working on a collapsible sidebar where the header shrinks to display only the letters 'J' and 'L' when collapsed. The issue I'm facing is finding the right balance between an empty header and adding in these lett ...

htmlcssbootstrap-4height

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

javascriptc#cssmodel-view-controllersignalr-hub

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascriptjqueryhtmlasp.net-mvc

Optimize flexbox navbar layout by eliminating unnecessary spacing between items

Greetings! As a novice in the world of web development, I must admit that I am facing some difficulties with my homework assignment. Despite my several attempts, I am unable to remove the spacing in the navbar on my university website clone project. It sim ...

htmlcssflexbox

A guide on linking to different sections on your webpage with Framework7

Exploring the traditional method of linking to specific sections on a webpage, where the anchor tag points to an element's ID within the page. Here is an example: <div class="main" id="section1"> <h2>Section 1</h2& ...

htmlscrollhyperlinkhtml-framework-7

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

javascriptjqueryhtmlcss

Tips for creating a responsive div that contains both an image and description, including automatically resizing the image to fit the

#content { background-color: #ACAE4C; float: right; display: inline-block; padding: 0; } <div id="content"> <div class="pic"></div> <div class="desc"></div> </div> I need assistan ...

htmlcssresponsive-design

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

I'm currently working with a Jade template that looks like this: extends layout block content h2 Characters and Portraits div(id="portraitsBox") - var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Sid ...

cssnode.jstemplatespugcascade