Question

I have a table that has 25 columns, and in total is about 2600px wide.

Right now, I have the structure as stated below – but it is flowing outside of the content area, and the content in each column is not aligned properly. In fact, content that should be on one line, is appearing on 2 or 3 in each row. It generally looks untidy.

I suspect that is because Twitter Bootstrap was made for smaller data sets – especially tables.

But does anyone have any ideas about how I might get this table to not look unwieldy?

<div class="container-fluid">
        <div class="content">
           <div class="row-fluid">
            <div class="span12">

              <h2>Home</h2>

<table class="table table-striped table-hover table-condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Co. Name</th>
      <th>Co. Phone</th>
      <th>Co. Size</th>    
      <th>Co. Type</th>    
      <th>City</th>
      .
      .
      .    
    </tr>
  </thead>  

  <tr>
    <td>John F Kennedy</td>
    <td>87698765</td>
    <td>[e-mail]</td>
     <!-- Begin Firm Info Here -->
        <td>Acme Inc</td>
        <td>[phone]</td>
       .
       .
       .
    </tr>
   </table>

      </div>
    </div>
  </div>
</div>

Thanks!

Answer 1

To avoid line breaks you can use

.the-table {
    white-space: nowrap;
    max-width: none;
    width: auto;
}

This will force an horizontal scroll on the container of the <table> (or in the browser if that container can expand). So, if you want to control its layout, you can put the <table> inside a <div> with overflow: auto and a set width. You can use a Bootstrap “span” with an extra class:

.the-container {
    overflow: auto;
    /* width cames from spanN class */
}