Building a flexible table design with flexbox

Is there a way to make a table responsive?

I'm looking for a table layout similar to this one:

https://i.sstatic.net/QqwzG.png

The table needs to adjust its column widths to be responsive.

I've heard that using Flexbox might be the best solution, but how do I implement it?

I attempted the following code:

.container {
  display: flex;
  border: 1px solid black;
}

.column {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}
<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

I created 4 columns with an equal number of rows, but they don't have the same height. How can I make them uniform?

Also, the first cell in each column needs to be empty.

Thank you for your help!

cssflexboxresponsive

Answer №1

Instead of using flexbox or tables, consider utilizing CSS Grid layout for this scenario. It is simple to implement for the code provided in the question.

In addition, try incorporating display: contents - keep in mind that it may not be supported in all browsers, more details can be found here.

.container {
  display: grid; /* grid containers */
  grid-template-columns: repeat(4, 1fr); /* four columns */
  grid-template-rows: repeat(4, 1fr); /* four rows */
  grid-auto-flow: column; /* in column direction */
  border: 1px solid black;
}

.column {
  display: contents; /* the child elements would be grid items */
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}
<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

Answer №2

Here is the code snippet for a responsive table:

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc;
  text-align: left; 
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
.responsive-table-input-matrix {
display: block;
position: relative;
width: 100%;

&:after {
clear: both;
content: '';
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}

tbody {
display: block;
overflow-x: auto;
position: relative;
white-space: nowrap;
width: auto;


tr {
display: inline-block;
vertical-align: top;

td {
display: block;
text-align: center;

&:first-child {
text-align: left;
}
}
}
}

thead {
display: block;
float: left;
margin-right: 10px;

&:after {
clear: both;
content: "";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}

th:first-of-type {
height: 1.4em;
}

th {
display: block;
text-align: right;

&:first-child {
text-align: right;
}
}
}
}

<table class="responsive-table-input-matrix">
<thead>
<tr>
<th></th>
<th>Owner</th>
<th>Group</th>
<th>Others</th>
<th>Administrators</th>
<th>Managers</th>
<th>Engineers</th>
<th>Sales</th>
<th>Employees</th>
<th>Customers</th>
<th>Community</th>
</tr>
</thead>
<tbody>

<tr>
<td>Add</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Edit</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Delete</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rename</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Move</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</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

Develop a flexbox containing three items, all with the same width

I'm struggling to create a flexbox layout with 3 items of equal width. The issue arises when I try to add padding or gap, causing it to break into only 2 columns! Grid is not an option - it has to be flex! Here is the HTML and CSS: .flex-contain ...

htmlcss

Attempting to adjust the spacing between my <h2> and <ul> tags to be more concise

I'm having trouble reducing the space between my h2 and ul elements. It seems that margins are not effective for ul elements and I can't seem to achieve the desired spacing. Is there a specific trick or technique that can be used to address this ...

htmlcss

Animate the CSS position from its current location to the bottom, set at 0%

I am trying to create a CSS animation to slide up an image that is sticking out of the bottom of the screen. The challenge is that the dimensions of the image are variable, so I don't know how much of it is initially visible outside the screen. What ...

htmlcssanimation

Changing the background color of a mat-menu in Angular material through programming techniques

I am currently working on a mega menu and have the following code snippet: <button mat-button [matMenuTriggerFor]="objectmenu">Objects</button> <mat-menu #objectmenu="matMenu" > <div class="menu-content" [style.b ...

cssangularangular-material

The issue with Bootstrap 4 Card Flex Width not functioning properly seems to be unique to Firefox

I'm currently facing an issue while creating a webpage using Bootstrap 4 and flex. I have Bootstrap cards with specific widths, and it seems to work perfectly fine in Google Chrome and Opera but not in Firefox. Here's the code snippet: <d ...

htmlcssfirefoxflexboxbootstrap-4

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works pe ...

htmlcssreactjs

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

cssvue.jssvg

I am noticing that "display: none;" is somehow being inserted automatically when the page renders. Where should I investigate to identify the root cause of this issue?

I have encountered an issue with a form element (a checkbox) that I integrated into a UI form. When the page loads, the Chrome F12 debugger indicates that display: none; has been applied as a style to the element: element.style { display: none; } This ...

javascriptjqueryhtmlcss

Bizarre glitch in the box-shadow transition

Recently, I encountered an unusual issue involving transitioning a box-shadow... Upon hovering over the divs, a box-shadow (black, 5px spread) is applied with a transition. Once the cursor leaves the divs, the box-shadow spread returns to 0px. The strang ...

javascripthtmlcss

Adjust HTML table cell height to dynamically match content and align to top

I am currently working on creating a table layout where the left column adjusts its height based on content, while the right column needs to have a fixed height of 300. <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>&a ...

htmlcsshtml-tablecss-tablesstyling

When the page loads, the ASP menu should display the sub-menu items in a unique style

<asp:SiteMapDataSource runat="server" ID="RelativeSiteMapDataSource" StartFromCurrentNode="False" ShowStartingNode="False" SiteMapProvider="CatalogSiteMap" /> <asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDispl ...

asp.netcssmenusubmenuaspmenu

Having trouble finding the element for an image of a body part using xpath

When using driver.findElement(By.xpath(".//*[@id='bodyPartContainer']/div[1]")).click(); to select a part of the human body image, I'm encountering the following exception in webdriver: org.openqa.selenium.NoSuchElementException: no such ...

jqueryhtmlcssseleniumxpath

Retaining hue when breadcrumb item is selected

Check out this working demo of breadcrumbs in action on JSFIDDLE Below is the code snippet: HTML <div id="crumbs"> <ul> <li><a href="#1">One</a></li> <li><a href="#2">Two</a></ ...

htmlcssbreadcrumbs

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

Trouble with CSS and JS tabs not activating when clicked?

I am experiencing issues with a navigation (organized in tabs) that is not functioning on this page, but it works correctly on this page using the same method for inclusion. When clicking "Norway" on the top left, the navigation opens but switching to the ...

javascripthtmlcss

Two columns with varying item counts but equal overall height

Wondering how to create a grid in HTML and CSS with columns of varying heights? I'm trying to find a way to make the shorter column stretch to match the height of the taller one. I attempted using JavaScript but wasn't satisfied with the results ...

javascripthtmlcsshtml-lists

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

javascripthtmlcssbutton

Generate a series of 5 columns that repeat in Bootstrap 4

I need to figure out how to create a 5 column grid in Bootstrap 4 to display over 100 images. The code I have currently only works if I have exactly 5 items, but what should I do if I have more than that? Additionally, the grid needs to switch to a 2 colu ...

csstwitter-bootstrapbootstrap-4

Using Bootstrap to create a fixed footer on a webpage

Is there a substitute for navbar-static-bottom? I currently have my footer set up like this: <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">&a ...

htmlcsstwitter-bootstrap