Bootstrap table word wrap is not working? -

i have problem bootstrap table. bootstrap table style works fine wide screens when tried see tablet pc columns overlapping on each other. please me out.

.table{    table-layout:fixed;    word-wrap:break-word;  }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      <div class="table-responsive">          <table class="table">              <thead>                 <tr>  			        <th>cbee id</th>  			        <th>first name</th>  			        <th>last name</th>  		          	<th>created on</th>  		         	<th>email</th>  		        	<th>facebook id</th>  		        	<th>linkedin id</th>						  		        	<th>owner beevites</th>  			        <th>attendee beevites</th>  			         <th>device id</th>  			</tr>	              </thead>              <tbody>                  <tr>                      <td>1</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                      <td>table cell</td>                    <td>9818c9b8d07c1bb507a05c387d3b3d743725ad81cb93f1858d5143ccd1624bdf</td>                  </tr>                              </tbody>          </table>      </div>

use this

<div class="table-responsive">     <table class="table">         <thead>             <tr>                 <th>#</th>                 <th>table heading</th>                 <th>table heading</th>                 <th>table heading</th>                 <th>table heading</th>                 <th>table heading</th>                 <th>table heading</th>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>             </tr>             <tr>                 <td>2</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>             </tr>             <tr>                 <td>3</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>                 <td>table cell</td>             </tr>         </tbody>     </table> </div>