title: AngularJS edit mode css
body: <p>On the following site:<a href="http://www.jgdoherty.org/" rel="nofollow">http://www.jgdoherty.org/</a> when "Edit" is clicked (it takes a few seconds for the rows to populate) the cells become padded. I want to remove this effect or at least reduce the padding. I assume it is a bootstrap class that is causing it (the page has a link to bootstrap.css) so I need to hack bootstrap.css to fix it but I have been unable to find the line of code that creates the padding.
  The html that creates the table in the page is  as follows:</p>
  
  <pre><code>      &lt;table class="table table-bordered table-hover" style="width:800px"&gt;
      &lt;tr&gt;
          &lt;th&gt;#&lt;/th&gt;
          &lt;td&gt;FirstName&lt;/td&gt;
          &lt;th&gt;LastName&lt;/th&gt;
          &lt;th&gt;Address&lt;/th&gt;
          &lt;th&gt;City&lt;/th&gt;
          &lt;th&gt;PostalCode&lt;/th&gt;
          &lt;th&gt;Country&lt;/th&gt;
          &lt;th&gt;Notes&lt;/th&gt;
      &lt;/tr&gt;&lt;tr data-ng-repeat="hotel in hotels"&gt;
          &lt;td&gt;&lt;strong data-ng-hide="hotel.editMode"&gt;{{ hotel.FriendId }}&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.FirstName }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.FirstName" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.LastName }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.LastName" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.Address }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Address" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.City }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.City" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.PostalCode }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.PostalCode" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.Country }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Country" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;{{ hotel.Notes }}&lt;/p&gt;
              &lt;input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Notes" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p data-ng-hide="hotel.editMode"&gt;&lt;a data-ng-click="toggleEdit(hotel)" href="javascript:;"&gt;Edit&lt;/a&gt; | &lt;a data-ng-click="deletefriend(hotel)" href="javascript:;"&gt;Delete&lt;/a&gt;&lt;/p&gt;
              &lt;p data-ng-show="hotel.editMode"&gt;&lt;a data-ng-click="save(hotel)" href="javascript:;"&gt;Save&lt;/a&gt; | &lt;a data-ng-click="toggleEdit(hotel)" href="javascript:;"&gt;Cancel&lt;/a&gt;&lt;/p&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated</p>