Table "size" problem when adding or removing some cells

Michael Constantine

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 .

avan

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.

avan

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.