How to prevent table columns not overlap when window size changing

Question

I am using table to display information. when I was resizing (minimizing window) table colums are overlapping. Here is my code.

<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>[email protected]</td>
  </tr>
</table>

This table info is displaying OK, but when I was minimizing the window the emailAddress is overlapping with the postalAddress. Are there any properties to add in CSS for not overlapping columns?

Answer 1

Your styles selection is telling your table to allow for overlaps. First you are selecting that width of the table always be the width of the window. Then you select that the width of the columns "table-layout" are always equally divided by the width of the window regardless of the content of the columns. So, what is happening as you shrink the window size is that each column shrinks equally regardless of their content. When you shrink the column pass the point of it's longest content, that content will begin to overlap into the next column.

Removing "table-layout:fixed" from your style will prevent overlap, but it will set column sizes based on the length of their content. You could also remove "width: 100%" which will also fix the problem but require you to pick a pixel width. You could use javascript option to detect window width and modify styles. Something like this:

 <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>[email protected]</td>
       </tr>
    </table>