Question

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>

Answer 1

只需添加＆＃39; display：table＆＃39;到CSS中的table元素。

table {
    display:table
}

那将会奏效。检查这个小提琴：http://jsfiddle.net/dqq5B/515/

Answer 2

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

删除额外的CSS。

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

2 个答案: