Tips for avoiding table column overlap during window resizing situations

My current issue involves using a table to present information. While resizing the window, I noticed that the columns in the table were overlapping. Below is the code snippet:

<table style="width:100%;table-layout:fixed">
  <tr style="border-bottom-style: none">
    <td>ID</td>
    <td>postalAddress</td>
    <td>emailAddress</td>
  </tr>
  <tr style="border-bottom-style: none">
    <td>123</td>
    <td>1234,west street</td>
    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5c4e425f434a1e6f48424e4643014c4042">[email protected]</a></td>
  </tr>
</table>

Although the table displays the information correctly, when the window is minimized, the emailAddress column overlaps with the postalAddress column. Are there any additional CSS properties that can be added to prevent column overlap?

htmlcss

Answer №1

Your table layout is currently set to allow overlaps by using the styles you have selected. The width of the table is always equal to the width of the window, and the columns are set to be equally divided regardless of their content. This means that as you resize the window, each column will shrink proportionally, causing overlapping when a column's content exceeds its width.

To prevent this overlap, you can remove the "table-layout:fixed" style, which will adjust the column sizes based on content length. Alternatively, removing "width: 100%" will fix the issue but require setting a specific pixel width. Another option is to use JavaScript to dynamically adjust styles based on window width, like the following example:

 <script type="text/javascript">   
    window.onresize = function() {
        if (window.innerWidth > 300) {
            document.getElementById("table").style.width = "100%";  
        }
        else {
            document.getElementById("table").style.width = "300px";
        }
    }
</script>
<table id="table" style="width:100%;table-layout:fixed">
       <tr style="border-bottom-style: none">
           <td>ID</td>
           <td>postalAddress</td>
           <td>emailAddress</td>
       </tr>
       <tr style="border-bottom-style: none">
           <td>123</td>
           <td>1234,west street</td>
           <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d1c3cfd2cec793e2c5cfc3cbce8cc1cdcf">[email protected]</a></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

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Having trouble getting the jQuery script to properly check file size in an HTML form before uploading?

I've created an HTML form with a jQuery script to verify the file size when the SAVE button is clicked. Despite my efforts, the check doesn't seem to be functioning properly in the HTML Form. Please assist me with this and thank you in advance ...

javascriptjqueryhtml

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

I'm just starting out with Angular JS. I'm trying to create an ng-click event in dynamically generated HTML from PHP, here's the code snippet. var app = angular.module('pageapp',[]); angular.module('pageapp') .filter(& ...

javascriptphphtmlangularjs

What could be causing my React components to not display my CSS styling properly?

If you're developing a React application and integrating CSS for components, ensure that you have included the style-loader and css-loader in your webpack configuration as shown below: module.exports = { mode: 'development', entry: &apo ...

javascripthtmlcssreactjs

Transfer the @font-face declaration from the global CSS file into the MUI Theme

In my project, I have an index.css file that includes the following @font-face declaration: //Index.css ... @font-face { font-family: "My Font"; font-style: normal; font-display: swap; font-weight: 400; src: url(/public/fonts/my-font.eo ...

cssreactjsmaterial-uifontsfont-face

Is it possible to incorporate a next.js image onto the background design?

I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image. If you need to see an example of this in action, check out this Template Monster theme. Here's the code s ...

javascripthtmlcssnext.jstailwind-css

Decreasing the vertical size of the page

My mobile page was meant to be all black, but it's only half black now. I tried the following CSS: @media (max-width: 768px) {body, html.page-id- 28{background-color: black! important;}} @media (max-width: 768px) {. parallax-window {background ...

htmlcss

Aligning text vertically in the center using Bootstrap

How can I center text vertically within a division with a height of 100vh? Here's what I've tried: .about-header { height: 100vh; background: #000; } .about-header p { font-size: 5em; } <link rel="stylesheet" href="https://maxcdn.boot ...

htmlcsstwitter-bootstrap

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

What is the method for choosing an Object that includes an Array within its constructor?

Is there a way to retrieve a specific argument in an Object constructor that is an Array and select an index within the array for a calculation (totaling all items for that customer). I have been attempting to access the price value in the Items Object an ...

javascripthtml

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

htmlcssw3c-validation

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Currently, I am utilizing DataTable to display 3 separate tables with the help of tabs, along with a search function. However, every time I load the page, I encounter a reinitialization error. Here is the snippet of my code: _datatables.forEa ...

javascriptjqueryhtml

Masonry style attempted for posts but did not produce desired outcome

I've been experimenting with different methods to achieve a masonry style layout for my posts. So far, using float:left seems to work almost perfectly, but occasionally there are gaps between the posts. I'm on the lookout for a solid solution to ...

htmlcss

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

javascripthtmlangularjsangular-material

Print directly without the need for a preview or dialog box

Is there a way to easily print content with just one click, without having to go through the preview or print dialog box? Here is a snippet of my code: <head> <style type="text/css"> #printable { display: none; } @media print { #non-pr ...

javascriptjqueryhtmlcss

What steps can I take to ensure my HTML5 mobile web app is optimized for compatibility across a variety of devices

I recently developed an HTML5 mobile web app and conducted tests on various devices including iPhones, iPads, Android phones, and tablets. What steps can I take to optimize the size and resolution of this app for seamless performance across all these dif ...

htmlhtml5-apps

Prioritize the timepicker over the use of a modal window

Having an issue with my time picker in Angular being blocked by a modal window. Component.ts open() { const amazingTimePicker = this.atp.open(); amazingTimePicker.afterClose().subscribe(time => { console.log(time); }); } // T ...

htmlangulartypescripttimepicker

Creating a replicated Dropdown menu with Jquery and inserting it into a changing Div

I currently have a dropdown list on my page with the ID of "mainDDL" and some pre-existing data. Now, I am looking to duplicate this dropdown list and add it to another specific div element. To accomplish this, I used the following code snippet: var dd ...

javascriptjqueryhtmlasp.net