Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    Table "size" problem when adding or removing some cells

    Coding Question & Answers
    css html javascript size table
    2
    2
    16
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Michael Constantine
      Michael Constantine last edited by

      Hello there again, i have recently asked for some help in a table code it went very good, but there was a problem that i didn't noticed at the beginning .. in my original code, if i add or remove some cells from the table, the cell size still as it was, but in the modified code, as for a reason i can't understand, when i add or remove some cells from the table the rest of the cells change their sizes, they are like connected somehow to the table size, it's like if i add more cells to the table, all the cells become smaller to fit inside the table, and if i remove some of them they will be bigger to git inside the table size that i have chose, but in the original code if i add or remove some of them they just disappear and the table makes itself smaller !
      this is the original code :

      <html>
      <head>
      
      <script>
      window.onload = function(){
      
          var all = document.getElementsByTagName("td");
          for (var i=0;i<all.length;i++) {
              all[i].onclick = inputClickHandler;       
          }
      };
      
      function inputClickHandler(e){
          e = e||window.event;
          var tdElm = e.target||e.srcElement;
          if(tdElm.style.backgroundColor == 'rgb(255, 0, 0)'){
              tdElm.style.backgroundColor = '#fff';
          } else {
              tdElm.style.backgroundColor = '#f00';
          }
      }
      </script>
      
      
      
      
      </head>
      
      <body>
      
      <style>
      
      
      td:hover, th:hover { cursor:pointer }
      
      table {
        border-collapse: collapse;
      }
      table, tr, td {
        border: 1px solid black;
      }
      tr, td {
        padding: 4px;
        text-align: center;
      }
      
      table { 
          border-spacing: 3px;
          border-collapse: separate;
      }
      
      </style>
      
      <form>
      <table border width=''300'' height=''300'' cellspacing=''0'' cellpadding=''0'' align=center>
      
      <tr>
      <td >01</td>
      <td >02</td>
      <td >03 </td>
      <td >04</td>
      <td >05 </td>
      <td >06</td>
      <td >07 </td>
      <td >08</td>
      <td >09 </td>
      <td >10</td>
      </tr>
      
      <tr>
      <td >11</td>
      <td >12</td>
      <td >13 </td>
      <td >14</td>
      <td >15 </td>
      <td >16</td>
      <td >17 </td>
      <td >18</td>
      <td >19 </td>
      <td >20</td>
      </tr>
      
      <tr>
      <td >21</td>
      <td >22</td>
      <td >23 </td>
      <td >24</td>
      <td >25 </td>
      <td >26</td>
      <td >27 </td>
      <td >28</td>
      <td >29 </td>
      <td >30</td>
      </tr>
      
      <tr>
      <td >31</td>
      <td >32</td>
      <td >33 </td>
      <td >34</td>
      <td >35 </td>
      <td >36</td>
      <td >37 </td>
      <td >38</td>
      <td >39 </td>
      <td >40</td>
      </tr>
      
      <tr>
      <td >41</td>
      <td >42</td>
      <td >43 </td>
      <td >44</td>
      <td >45 </td>
      <td >46</td>
      <td >47 </td>
      <td >48</td>
      <td >49 </td>
      <td >50</td>
      </tr>
      
      <tr>
      <td >51</td>
      <td >52</td>
      <td >53 </td>
      <td >54</td>
      <td >55 </td>
      <td >56</td>
      <td >57 </td>
      <td >58</td>
      <td >59 </td>
      <td >60</td>
      </tr>
      
      <tr>
      <td >61</td>
      <td >62</td>
      <td >63 </td>
      <td >64</td>
      <td >65 </td>
      <td >66</td>
      <td >67 </td>
      <td >68</td>
      <td >69 </td>
      <td >70 </td>
      </tr>
      
      <tr>
      <td >71</td>
      <td >72</td>
      <td >73 </td>
      <td >74</td>
      <td >75 </td>
      <td >76</td>
      <td >77 </td>
      <td >78</td>
      <td >79 </td>
      <td >80 </td>
      </tr>
      
      <tr>
      <td >81</td>
      <td >82</td>
      <td >83 </td>
      <td >84</td>
      <td >85 </td>
      <td >86</td>
      <td >87 </td>
      <td >88</td>
      <td >89 </td>
      <td >90 </td>
      
      </tr>
      </table>
      </form>
      </body>
      
      
      
      
      
      </html>
      

      and this is the modified code

      <html>
      <head>
      
      
      </head>
      
      <body>
      
      <style>
      td:hover, th:hover { background:#ff0000; color:#fff; }
      td:hover, th:hover { cursor:pointer }
      
      
      
      
      
      
      table {
        border-collapse: collapse;
      }
      table, tr, td {
        border: 1px solid black;
      }
      tr, td {
        padding: 4px;
        text-align: center;
      }
      
      table { 
          border-spacing: 3px;
          border-collapse: separate;
      }
      
      .highlightRed {
        background:#ff0000;
        color:#fff;
      }
      
      </style>
      
      <form>
      <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>
      
      
      
      <tr>
      <td class="cell">01</td>
      <td class="cell">02</td>
      <td class="cell">03 </td>
      <td class="cell">04</td>
      <td class="cell">05 </td>
      <td class="cell">06</td>
      <td class="cell">07 </td>
      <td class="cell">08</td>
      <td class="cell">09 </td>
      <td class="cell">10</td>
      </tr>
      
      <tr>
      <td class="cell">11</td>
      <td class="cell">12</td>
      <td class="cell">13 </td>
      <td class="cell">14</td>
      <td class="cell">15 </td>
      <td class="cell">16</td>
      <td class="cell">17 </td>
      <td class="cell">18</td>
      <td class="cell">19 </td>
      <td class="cell">20</td>
      </tr>
      
      <tr>
      <td class="cell">21</td>
      <td class="cell">22</td>
      <td class="cell">23 </td>
      <td class="cell">24</td>
      <td class="cell">25 </td>
      <td class="cell">26</td>
      <td class="cell">27 </td>
      <td class="cell">28</td>
      <td class="cell">29 </td>
      <td class="cell">30</td>
      </tr>
      
      <tr>
      <td class="cell">31</td>
      <td class="cell">32</td>
      <td class="cell">33 </td>
      <td class="cell">34</td>
      <td class="cell">35 </td>
      <td class="cell">36</td>
      <td class="cell">37 </td>
      <td class="cell">38</td>
      <td class="cell">39 </td>
      <td class="cell">40</td>
      </tr>
      
      <tr>
      <td class="cell">41</td>
      <td class="cell">42</td>
      <td class="cell">43 </td>
      <td class="cell">44</td>
      <td class="cell">45 </td>
      <td class="cell">46</td>
      <td class="cell">47 </td>
      <td class="cell">48</td>
      <td class="cell">49 </td>
      <td class="cell">50</td>
      </tr>
      
      <tr>
      <td class="cell">51</td>
      <td class="cell">52</td>
      <td class="cell">53 </td>
      <td class="cell">54</td>
      <td class="cell">55 </td>
      <td class="cell">56</td>
      <td class="cell">57 </td>
      <td class="cell">58</td>
      <td class="cell">59 </td>
      <td class="cell">60</td>
      </tr>
      
      <tr>
      <td class="cell">61</td>
      <td class="cell">62</td>
      <td class="cell">63 </td>
      <td class="cell">64</td>
      <td class="cell">65 </td>
      <td class="cell">66</td>
      <td class="cell">67 </td>
      <td class="cell">68</td>
      <td class="cell">69 </td>
      <td class="cell">70 </td>
      </tr>
      <tr>
      <td class="cell">71</td>
      <td class="cell">72</td>
      <td class="cell">73 </td>
      <td class="cell">74</td>
      <td class="cell">75 </td>
      <td class="cell">76</td>
      <td class="cell">77 </td>
      <td class="cell">78</td>
      <td class="cell">79 </td>
      <td class="cell">80 </td>
      </tr>
      <tr>
      <td class="cell">81</td>
      <td class="cell">82</td>
      <td class="cell">83 </td>
      <td class="cell">84</td>
      <td class="cell">85 </td>
      <td class="cell">86</td>
      <td class="cell">87 </td>
      <td class="cell">88</td>
      <td class="cell">89 </td>
      <td class="cell">90 </td>
      </tr>
      </table>
      </form>
      <script>
      // Keeps track of all red cells
      let count = 0;
      // Get all cells
      let cells = document.querySelectorAll(".cell"); 
      // Attach click event listener to all cells 
      for(let i = 0; i < cells.length; i++){
      	let cell = cells[i];
        cell.onclick = function() {
          // If cell has not been highlighted yet
          if(!cell.classList.contains('highlightRed')){
            // If less than 6 cells have been highlighted as red, highlight 
            // this cell red 
          	if(count < 6){
              cell.classList.toggle("highlightRed");	
            	count++;
            }
          // Cell is highlighted as RED. 
          // Mark cell is whie and decrement count. 
          }else {
      			cell.classList.toggle("highlightRed");
            count--;
          }
      	};
      }
      </script>
      </body>
      
      
      </html>
      

      of course, the code should stay as it is modified, but this problem that happened in it i can't figure it out !
      thank you a lot in advance .

      Reply Quote 0
        1 Reply Last reply

      • avan
        avan last edited by

        Hey @Michael-Constantine again,

        No sure if I understand. But I think you have to pay attention to the width and height you have set here:

        <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>
        

        So the table will always to stay within those dimensions regardless of how many cells you are adding or removing.

        Do you want the cells to stay the same size? If so try to adjust the width and height every-time you adjust cell numbers. Hope this helps.

        Reply Quote 0
          1 Reply Last reply

        • avan
          avan last edited by

          Hey @Michael-Constantine again,

          No sure if I understand. But I think you have to pay attention to the width and height you have set here:

          <table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>
          

          So the table will always to stay within those dimensions regardless of how many cells you are adding or removing.

          Do you want the cells to stay the same size? If so try to adjust the width and height every-time you adjust cell numbers. Hope this helps.

          Reply Quote 0
            1 Reply Last reply

          • First post
            Last post