title: HTML / CSS: Same table-cell width across rows
body: <p>I have this table that includes details about its items on the right and I need to have all the cells in a column of the exact same width as the longest one, just like in the screenshot below:</p>
  
  <p><img src="https://i.imgur.com/7eOpU54.png" alt="" /></p>
  
  <p>This works if I use a regular table, but now I need to add an accordion function on top of it, so when I click on a row, the row's associated content will slide down from under each one. </p>
  
  <p>The only way to add those content divs between table rows is to wrap them in <code>&lt;tr&gt;</code> tags, which don't work with the <code>slideDown()</code> and <code>slideUp()</code> effects.</p>
  
  <p>Now I recreated the table in a fiddle using <code>&lt;dl&gt;</code> tags, hoping to solve this using CSS somehow, but no such luck. Here's the link: <a href="http://jsfiddle.net/bbDYX/" rel="nofollow noreferrer">http://jsfiddle.net/bbDYX/</a> - everything is working properly, except for the width issue.</p>
  
  <p>The only solution I can think of now is going through each table-cell on each of the right hand columns with JavaScript and setting their width to the same value as the highest width cell. But I want to avoid that if I can.</p>
  
  <p>Any ideas?</p>