Is it possible to expand only certain columns in an oversized table using CSS?
I have a flexible-width table whose cells can be populated with arbitrary content. However, I would like to be able to dictate that certain columns should not expand past their natural non-breaking width using only CSS. It seems like this should be possible by having the columns take a mixture of widths 'auto' and percentages:
<table style="width: 100%">
<col style="width: auto" />
<col style="width: 100%" />
<tbody>
<tr>
<td>Sender N开发者_如何转开发ame</td>
<td>Subject Line</td>
</tr>
</tbody>
</table>
However, this does not seem to work. Is there a way to do this using CSS only? I cannot use white-space: nowrap
.
Without some actual width definitions you have to apply nowrap. The good news is you can apply this to the one cell and go. It shouldn't break any of your other code. Look here:
http://jsbin.com/axuhum/5
Also if you do not set the table to be 100%, but rather the cell you want to auto-expand then it will. :)
Here's the code for reference.
<table>
<tbody>
<tr>
<td style="white-space: nowrap;">Sender Name</td>
<td style="width: 100%;">Subject Line</td>
</tr>
</tbody>
</table>
精彩评论