title: Why is browser showing td's larger than my specified width property?
body: <p>td width is 162px even though style="width:25px" for td and th</p>
  
  <p>I've put this in my css file</p>
  
  <pre><code>table, td, th {
      border: 1px solid black;
  }
  table {
      border-collapse:collapse;
  }
  
  table.narrow th, td {
      width:50px;
  }
  </code></pre>
  
  <p>It doesn't work. The last one there is supposed to take a table with class="narrow" and make all its descendent th and td elements 50px wide. And chrome shows Matched CSS Rules:</p>
  
  <pre><code>.narrow th, td { width: 50px; }
  </code></pre>
  
  <p>So chrome is reading it and ignoring it? Or CSS is just idiotic? Or I am? Why can't CSS just do what you tell it, like a normal programming language?</p>
  
  <p>SO, I tried putting style="width:25px" right in the 1st column td AND th tags and still, doesn't work. Chrome shows: </p>
  
  <pre><code>element.style { width:25px; } 
  </code></pre>
  
  <p>but it won't tell me why the hell it's displaying it at 162px.</p>
  
  <p>Anyone have any clues?
  Thank you.</p>
  
  <hr>
  
  <p>Edit: Kolink gave me the clue I needed. Form text fields inside the  tags were causing a large minimum width.  I added this style to shrink the table:</p>
  
  <pre><code>.narrow input{
    width:80px;
  }
  </code></pre>
  
  <p>It reduced the width of all the inputs inside the class="narrow" table and hence reduced the width of the table.</p>