Question

I have a table like this:

<table>
    <tbody>
        <tr>
            <td>someArg:String</td>
            <td>&ndash;</td>
            <td>This is a description about this argument.</td>
        </tr>
    </tbody>
</table>

The table is set to 100% width using CSS and is dynamic based on the browser width.

When the third cell has a small amount of content, the first cell will all be on one line. However, when the third cell contains a lot of content, the first cell will crumple up and may look like this:

someArg:
String

I want to ensure that the content of the first column always stretches its cell to fit perfectly (for the widest first cell in the table obviously, not individually).

From here I just want the final cell in the row to use up the remainder of the table’s 100% width.

How can I achieve this?

Here is a fiddle for more explanation: http://jsfiddle.net/8CHMv/

Answer 1

I would add a class to the td that you want to be one line and add

.myClass{
   white-space:nowrap;
}