title: CSS, JavaScript style dynamic table
body: <p>Some help would be much appreciated. It's too much information to sink in for a new developer here</p>
  
  <p>I am trying to make a dynamic table created like this:</p>
  
  <pre><code>function myFunction2() {
      var img = new Image();
      var table = document.getElementById("Table1");
      var row = table.insertRow(table.length);
      for (i = 0; i &lt; 12; i++) {
      row.insertCell(i);
       }
      //Add Txt
      row.insertCell(1).innerHTML = "insert";
      //Add Images
      var Sport = document.createElement("IMG");
      Sport.setAttribute("src", "Images/ball.png");
      Sport.setAttribute("div", "Sport");
      row.insertCell(0).appendChild(Sport);
  
  
      //Add drop-down list
      var dd = document.createElement("select");
      dd.name = "SportSelector";
      dd.id = "id" + document.getElementById('Table1').rows.length;
      dd.options[dd.length] = new Option("Soccer", "value1");
      dd.options[dd.length] = new Option("Basket", "value2");
      dd.options[dd.length] = new Option("Hockey", "value3");
      dd.setAttribute("onchange", "GetSport(this)");
      row.insertCell(1).appendChild(dd);
      //Done
  }
  </code></pre>
  
  <p>So far so good, But right about now I am stuck trying to resize the table and I have no clue How to do this. For now I am trying to adjust Col(0) which should only contain an icon. </p>
  
  <p>I have tried to give it class name "Sport" and in CSS have this:</p>
  
  <pre><code> Sport {
      width: 20 px;
      margin-right: 30%;
      border: 1px solid #000;
   }
  </code></pre>
  
  <p>But this does not work. Any pointer to what I need to do would be great ?</p>
  
  <p>Edit:</p>
  
  <p>Ok so I went with the suggestion from Ivan86 , I have a couple of questions? </p>
  
  <p>Looks like your edit broke another part of my code</p>
  
  <pre><code>function GetSport(val) {
      var x = val.id;
      var x = x.replace("id", "");
      var table =  document.getElementById("Table1")
      table.rows[x - 1].cells[0].innerHTML = "&lt;img src='Images/ball.png'/&gt;";
      //alert("The input value has changed. The new value is: " + val.id);
  }
  </code></pre>
  
  <p>This code was supposed to also change the img file based on the selection in the drop-down. Any suggestion to how to fix ? </p>
  
  <p>Also this part of your suggestion I did not add:</p>
  
  <pre><code>&lt;table id="Table1"&gt;
  &lt;tr&gt;
      &lt;td colspan="12"&gt;OLD ROW&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br/&gt;
  &lt;input type="button" onclick="myFunction2()" value="add a new row" /&gt;
  </code></pre>
  
  <p>And the txt "insert" was not supposed to be any part of the code, I updated to this: </p>
  
  <pre><code>function myFunction2()
  {
  var img = new Image();
  var table = document.getElementById("Table1");
  var row = table.insertRow(table.length);
  // make a cell array
  var cells = [];
  
  for (i = 0; i &lt; 13; i++)
  {
    // add the cell to the table and to the cell array
    cells.push(row.insertCell(i));
  }
  //Add Txt
  
  //Add Images
  var Sport = document.createElement("IMG");
  Sport.setAttribute("src", "Images/ball.png");
  Sport.setAttribute("height", "20px");
  Sport.setAttribute("width", "20px");
  cells[0].appendChild(Sport);
  // to add class
  cells[0].classList.add('Sport');
  // to add CSS to the first cell
  cells[0].style.width = '15px';
  // create margin-right effect
  cells[1].style.padding = '0 0 0 0px';
  
  
  //Add drop-down list
  var dd = document.createElement("select");
  dd.name = "SportSelector";
  dd.id = "id" + document.getElementById('Table1').rows.length;
  dd.options[dd.length] = new Option("Soccer", "value1");
  dd.options[dd.length] = new Option("Basket", "value2");
  dd.options[dd.length] = new Option("Hockey", "value3");
  dd.setAttribute("onchange", "GetSport(this)");
  cells[1].appendChild(dd);
  //Done
  }
  </code></pre>
  
  See the Pen <a href="https://codepen.io/frederik84/pen/LeqGzz/" rel="nofollow noreferrer">My project</a> by frederik (<a href="https://codepen.io/frederik84" rel="nofollow noreferrer">@frederik84</a>) on <a href="https://codepen.io" rel="nofollow noreferrer">CodePen</a>.</p>