I have a table set up like this:
<table>
<tbody>
<tr>
<td>someArg:String</td>
<td>–</td>
<td>Description of the argument goes here.</td>
</tr>
</tbody>
</table>
This table has been styled with CSS to be 100% width and is responsive based on the browser width.
However, I am facing an issue when the content in the third cell varies. If it's short, the first cell displays properly, but if it's long, the first cell breaks like this:
someArg:
String
I need the first cell to always expand to fit the widest content (not individual cells) and have the last cell occupy the remaining space within the available 100% table width.
Any suggestions on how I can achieve this?
You can check out this fiddle for a better visualization: http://jsfiddle.net/8CHMv/