How can I prevent automatic line breaks in a column of table (not a single cell)?
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a way to play audio on a mobile browser w
- HTML form is not sending $_POST values
- implementing html5 drag and drop photos with knock
- Adding a timeout to a render function in ReactJS
Use the nowrap style:
It's CSS!
The
nowrap
attribute I believe is deprecated. The above is the preferred way.There are a few ways to do this; none of them are the easy, obvious way.
Applying white-space:nowrap to a
<col>
won't work; only four CSS properties work on<col>
elements - background-color, width, border, and visibility. IE7 and earlier used to support all properties, but that's because they used a strange table model. IE8 now matches everyone else.So, how do you solve this?
Well, if you can ignore IE (including IE8), you can use the
:nth-child()
pseudoclass to select particular<td>
s from each row. You'd usetd:nth-child(2) { white-space:nowrap; }
. (This works for this example, but would break if you had any rowspans or colspans involved.)If you have to support IE, then you've got to go the long way around and apply a class to every
<td>
that you want to affect. It sucks, but them's the breaks.In the long run, there are proposals to fix this lack in CSS, so that you can more easily apply styles to all the cells in a column. You'll be able to do something like
td:nth-col(2) { white-space:nowrap; }
and it would do what you want.To apply it to the entire table, you can place it within the
table
tag:<table style="white-space:nowrap;">
You can use the CSS style white-space:
This is an example usage of the white space property with value nowrap, the bluetable is the class of the table, below the table are the css styles