CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
peace_love
peace_love

Reputation: 6461

How can I make my scrollable table 100% window width?

http://jsfiddle.net/dqq5B/515/

      <div>

<style>
        <table class = "table table-hover">
            <tr>
               <th> Game ID </th>
               <th> Status </th>
               <th> Players </th>
               <th> Turn </th>
               <th> Last Turn </th>
           </tr>
           <tr>
               <td> 1 </td>
               <td> IN PROGRESS </td>
               <td> 4/4 </td>
               <td> tedbeem </td>
               <td> 11/12/13 6:30 PM </td>

           </tr>
           <tr>
               <td> 2 </td>
               <td> RECRUITING </td>
               <td> 4/5 </td>
               <td> N/A </td>
               <td> 11/12/13 3:10 PM </td>

           </tr>
           <tr>
               <td> 13 </td>
               <td> IN PROGRESS </td>
               <td> 3/3 </td>
               <td> D-Halt-on </td>
               <td> 11/12/13 9:00 AM </td>

            </tr>
        </table>

    table tr td:last-child {
        white-space: nowrap;
        width: 1px;

    }

    table {

         display: block;
            overflow-x: auto;
            width:100%;
    }

    div{margin:0 auto; width:100%}

</style>

Upvotes: 0

Views: 44

Answers (2)

oanaalex
oanaalex

Reputation: 72

What are you trying to obtain by adding all that css? If you are using the Bootstrap Framework, you just need to add the classes in your HTML.

Remove the extra CSS.

Upvotes: 0

Vishwas Singh Chouhan
Vishwas Singh Chouhan

Reputation: 891

Just add 'display: table' to the table element in the CSS.

table {
    display:table
}

That'll work. Check this fiddle: http://jsfiddle.net/dqq5B/515/

Upvotes: 2

Related Questions