HTML table

by sangil

HTML

<div id="tblcont" class="tblcont">
  <table     id="pivot_table" class="hover JColResizer">
     <tbody>
       <tr>
          <th id="h0" >product</th>
          <th id="h1" >price</th>
          <th id="h2" >change</th>
       </tr>         
       <tr>
          <td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
          <td id="c01" >3212</td>
          <td id="c02" >219</td>         
          
       </tr>
       <tr>
          <td id="c10" >Acer</td>
          <td id="c11" >3821</td>
          <td id="c12" >206</td>         
          
       </tr>
    </tbody>
  </table>
</div>

CSS

.tblcont {
  margin-right: 150px;
  margin-top: 200px;
  border: 2px solid green;
  overflow: hidden;
  width: 500px;
}

table {
  table-layout: fixed;
  border-collapse: collapse; 
  overflow-x: scroll; 
  border-spacing:0; 
  padding:0;  
  border:0;
  width: 100%;
}

th, td {
  border: solid #4682B4 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  text-align: center;
}

th {
  height: 50px;
  font-size:150%;
  color: #266294;
}

JavaScript

$(document).ready(function() {

    // THIS LINE HAS NO EFFECT!
    $('#c00').width(30);
});