如何使我的可滚动表100％窗口宽度？

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>

2 个解决方案

#1

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

只需将'display：table'添加到CSS中的table元素即可。

table {
    display:table
}

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

那会有用。检查这个小提琴：http：//jsfiddle.net/dqq5B/515/

#2

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.

你想通过添加所有的CSS来获得什么？如果您使用的是Bootstrap Framework，则只需在HTML中添加类。

Remove the extra CSS.

删除额外的CSS。

#1