Unexpected behavior when using HTML tables and divs with flexbox in <td> and <th> elements

Objective: My goal is to create a table using HTML that has a scrollable tbody and a fixed first column, with each cell in a column having the same width and row height adjusting based on content.

Approach taken: I initially attempted this using an HTML table but found it challenging. Instead, I tried implementing a table with a sticky header and first column following a reference from here: https://codepen.io/paulobrien/pen/LBrMxa?editors=1100. However, I encountered issues with spacing when applying flexbox within td elements.

I later learned that complex styling within td and th elements in an HTML table can cause rendering problems.

Question: Can HTML tables effectively handle divs with flexbox alignment while maintaining expected rendering?

Future plans: Considering exploring CSS Grid for building a more flexible table structure that can accommodate various items more effectively.

htmlcsshtml-tablecss-grid

Answer №1

<table>
   <colgroup>
      <col width="50%">
      <col width="50%">
   </colgroup>

   <tr>
      <th>Id</th>
      <th>Title</th>
  </tr>
  <tr>
      <td>3476896</td>
      <td>My first HTML</td>
  </tr>
</table>

The colgroup element can be utilized to define properties for each column in a table by wrapping the col elements inside it. In this example, I have assigned the width property to each col element within the colgroup.

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

Show Api Image

Trying to display an image from an API call in PHP to an HTML img tag with the following code: <div class="col-md-3 col-lg-3 " align="center"><img alt="User Pic" <?php echo 'src="'. $data['response']['avatar'] . & ...

phphtml

"Emulate the social sharing capabilities of CNET with interactive share

I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...

javascripthtmluser-interfacesocial-networking

Hovering over a link within a paragraph will not trigger the :hover effect

I attempted to apply the :hover effect specifically to a link inside a paragraph. The paragraph with the class .hop is initially hidden, but when I hover over the link, nothing happens. .hop { display: none; } a.hop2:hover + .hop { display: block; } ...

htmlcsshover

Initial loading size of Google chart

After creating a Google chart, I noticed that on the initial load, the chart appears tiny. Although it becomes responsive when adjusting the screen size, I would prefer it to be responsive from the start. Please note that there is a dropdown menu for sele ...

javascripthtmlcssgoogle-visualization

Categorize Jekyll tags into two distinct groups

I am currently using Jekyll to construct a GitHub Pages website. The grid and column layout are powered by Bootstrap. When it comes to listing all the posts linked to a specific tag, I begin by sorting the tags and then listing all the posts associated wit ...

htmlbootstrap-4jekyll

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

pythonhtmlcssplaywrightplaywright-python

Loop through all the textarea fields within a designated class to remove emojis from a field that contains "Gift Message" in its name

I need a pure JavaScript solution for extracting the value of a textarea field with "Gift Message" in its name. I'm currently stuck and unable to achieve this. Can someone assist me in resolving this issue? Below is the HTML code snippet: <span cl ...

javascripthtmljqueryfrontendweb-deployment

Which HTML5 tag is ideal for annotating blog snippets effectively?

Many blogs include archive pages that organize blog posts by date or category, displaying relevant excerpts and links. I am unsure which HTML5 element would be most suitable for these individual posts. The <article> tag may seem appropriate if you a ...

htmlsemantic-markup

I can't seem to figure out why document.getElementById().innerHTML isn't functioning properly

In my scenario, there exists a span with an identical value. echo "<span id='msgNotif1' class='badge' style='position:relative;right:5px;bottom:10px;'>".$number."</span>"; The $number variable holds a specific v ...

javascriptphphtml

Establish a background image for a particular item within a list

Employing Ionic 2 with Typescript. I am seeking a way to empower users to choose the background color for each item in my list. ISSUE: How can I retrieve the reference to the i-th element? Whenever I select an item, it only changes the background of the ...

htmlcssangulartypescriptionic2

@media query not functioning properly with certain rules

I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules. For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. How ...

htmlcssmedia

What are the sequential steps to create a CSS/HTML layout efficiently?

As a developer who is familiar with print design but new to web design, I have a designer assisting me in this transition. While I don't need tips on design or usability, I am eager to learn about the step-by-step process of coding a webpage. I want t ...

htmlcss

Which is better for cycling through a list of items: CSS or JavaScript?

Currently, I have a navigation bar set up as an unordered list (<ul>), but some list items are not visible. I want to implement functionality where clicking arrows will move the elements left or right by hiding or showing the leftmost or rightmost it ...

javascriptcss

Tips for retrieving selected items in an array object

Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...

javascriptjqueryhtmlcss

Determine if a user's inputted number matches a randomly generated number using Javascript

I am trying to generate a random number, prompt the user to input a number, compare the two, and display a popup indicating whether they match or not. Below is the code that I have written for this functionality. function generateRandomNumber() { ...

javascripthtml

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

htmlcsstwitter-bootstrap

Ways to achieve varying border widths among multiple divs that are linked to text size

Hey there, I'm looking to make some changes to the UI of my game. I want to transform it from this: https://i.sstatic.net/iLpFY.jpg To this (which is an edited version using paint.net of the previous image): https://i.sstatic.net/qudVm.jpg <html& ...

htmlcss

The jQuery css method fails to apply styles to SVG circle elements

HTML: <div class="container"> <article class="caption"> <svg class="grid-point" width="100" height="100" style="height: 120px; width: 625px;"> <circle class="myPoint" cx="50" cy="50" r="5" fill="#80E1EE" / ...

javascriptjquerycsshtml

Tips for safeguarding registration forms against spamming

The ASP.NET/Mono MVC2 E-shop includes a registration form that requests mandatory customer name, address, phone password (entered twice) and some optional fields. Should we add spam protection to the form? The current setup verifies that the password and ...

asp.nethtmlasp.net-mvcformsasp.net-mvc-2