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

Modify CSS image according to the user interface language in asp.net

Is there a way to dynamically change the image based on different cultures in my ASP.NET webpage? I have successfully been able to switch strings using a resource file, but I am unsure how to handle images. Currently, I have an A tag with a specific clas ...

javascriptc#cssasp.netlocalization

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

javascripthtml

Convert JSON data into a nested unordered list

I need help converting a JSON object into an unordered list using jQuery. Here's the JSON data I have: var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3&bs ...

jqueryhtmljsonhtml-lists

When working with ajax, you can easily refer to elements by using the $(this)

I am having trouble using the $(this) selector in the ajax success function to target the element with the class .selectclass that was double-clicked before. Any suggestions on how to make this work within the ajax success function? Here's the jQuery ...

jqueryhtmlajax

Steps to reveal a hidden div when clicking on another div using CSS exclusively

Is it possible to reveal a hidden div when another div is clicked using only CSS? Below is the HTML code: <div id="contentmenu"> <div class="show"> <a class="show"> My Student ...

htmlcss

The text that follows the cursor seems to stand out taller than the rest

When I type words in a textarea input field, the cursor seems to be taller than it should be (as shown below). What is causing this issue and is there a way to make it as tall as the words with a font size of 38px? Here is the code snippet: <textarea n ...

htmlcss

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

How can I customize the color of a date range in the jQuery date picker?

Currently, I am using the following method to set a different color for a specific date range - April 5th to April 7th. You can view it here: http://jsfiddle.net/sickworm/dpvz52tf/ var SelectedDates = {}; SelectedDates[new Date('04/05/2015') ...

jquerycsscalendarbackground-colordatapicker

Utilizing Material-UI CssBaseline with React JS

Looking to enhance the consistency of my new React app with a sleek design using Material-UI. Want it to be easy to maintain, so decided to start with the default theme. Trying out cssBaseline from Material-UI but running into issues. Not very familiar wit ...

cssreactjsmaterial-ui

Troubleshooting CSS Problems: Issues with background repeating and footer placement

I am currently in the process of transitioning my website to a CSS layout, and so far it's looking good. However, I am facing two specific issues with the page layout that I need help with: 1) The background image of the left-most column is not repea ...

htmlcss

The dynamic design of the webpage allows for a fluid layout, where the navigation bar smoothly adjusts its position when

I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...

csshtml

PHP: implementing several forms on a single webpage

In my current situation, I need to display forms that resemble an Excel sheet with a submit button next to each row. When the submit button is clicked, the data is saved for that specific row, the row is disabled, and the focus automatically moves to the n ...

phpjqueryhtmlmysqlforms

Resolving the Issue of Jerky Graphics During HTML5 Canvas Animation

When animating a layer in canvas, the visual quality becomes uneven if there are additional layers present. You can see an example of this by clicking "RUN" on this fiddle: http://jsfiddle.net/Q97Wn/ If I modify this line: opts.percentageIndicator.clearR ...

javascripthtmlanimationcanvas

Content OverFlow: DropDown Menu is not overlapping the content, but rather pushing it downwards

In my webpage, I have a drop-down menu that traditionally pushes the content below it down to make space for its items. However, I want the drop-down to overlap the contents below without affecting their position. I've tried various solutions, such a ...

javascriptjquerycssdrop-down-menuxhtml

Using JQuery to Evaluate HTML into an Element

When working with PHP pages, I often need to fetch data from another source and populate an input or textarea field. However, I encounter issues when dealing with HTML tags and apostrophes. In my experience, passing around HTML content using JavaScript ca ...

phpjqueryhtmleval

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

javascriptcssangularag-gridag-grid-angular

Beginner attempting to comprehend Safari CSS font-size test outcomes

Currently, I am delving into the realm of CSS. To test my skills, I am making edits to an HTML file and previewing the outcome in Safari V11.0. My objective is to present an online version of a traditional printed report, complete with fixed columns and a ...

cssfontssafari

Guide to dynamically updating a textarea in vue.js by incorporating data from several inputs

Is there a way to update a textarea based on multiple inputs using jQuery and vue.js? I have successfully implemented the jQuery part with line breaks, but when I try to display the value of the textarea elsewhere using vue.js, it doesn't seem to work ...

javascriptjqueryhtmlvue.js

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

javascriptcssreactjsmouseeventsettimeout

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

htmlcss