I'm using Twitter-Bootstrap (3.0) to design a project website for school, we're making an online Risk clone, with independant turns like Words With Friends. I use an HTML table to displays the player's list of current games and I would like to make it so the right-most column is flush against the edge and doesn't have a lot of extra white space.

Here is my dummy table:

<!-- language: lang-html -->

<table class = "table table-hover">
    <thead>
        <tr>
            <th> Game ID </th>
            <th> Status </th>
            <th> Players </th>
            <th> Turn </th>
            <th> Last Turn </th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td> 1 </td>
           <td> IN PROGRESS </td>
           <td> 4/4 </td>
           <td> tedbeem </td>
           <td> 11/12/13 6:30 PM </td>
           <td> <button class = "btn btn-primary"> View </button> </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>
           <td> <button class = "btn btn-primary"> View </button> </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>
           <td> <button class = "btn btn-primary"> View </button> </td>
       </tr>
    </tbody>
</table>

An example of what I want it to look like can be found here: http://bootsnipp.com/snippets/featured/table-with-users

What they did is give the last element a fixed width and somehow it works. Can someone explain this or give my a better solution?

The problem is that the last column (which is right aligned) takes up more space than the button inside it (which is left aligned) needs.

To fix this, you can do either of the following:

<!-- language-all: lang-css -->

1. Shrink the column to take up a smaller amount of space, so the button appears to hug the right*:

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

2. Right align the content of the last row so the button aligns to the right size of all the space it is allotted.

    table tr td:last-child {
        text-align: right;
    }
   

*Note: The sample went with the first option by applying an inline style to the last header, effectively setting the width for the whole column with <th style="width: 36px;"></th>

Working Demo in jsFiddle

Which will look like this: