How do you set a fixed width on a column

tomcat14

I have a sample here: http://live.datatables.net/qicusiha/3/edit

I have one column, Product Title, which has a lot of information. I would like to specify a set width for that column. I have tried several different things and have one of those in the current example but it does not work. Is there a way to do this and can you tell me how?

I have searched for the ability to change font size but have not found that either. I presume there is a way to do that but with all my searches I have drawn a blank.

allan

The problem you are likely running into here is that the table as a whole is quite wide. So the browser does everything it possibly can to keep the table visible in the viewport by collapsing the columns as much as possible. That includes ignoring any column sizes set and making them as small as possible!

There are a couple of options:

1. Use a rendering function that will output a div with a fixed width. That will force the browser to use at least that width for the column.
2. Use a renderer such as the ellipsis renderer to make the data smaller
3. Use table-layout: fixed in your CSS. But it can look seriously horrible if any of the sizes are wrong.

Allan

tomcat14

I like the first option you list but I don't see an example of how to set it up for setting a specific width for the column. Mainly what I see is ways to alter the data that is displayed. You mention that will output a div but I don't see an example of that either. What am I missing.

Also, you didn't mention the font size for the complete table, including the header, but maybe something could be done with the rendering function there also, I don't know.

allan

render : function ( data, type, row ) {
  if ( type === 'display' ) {
    return '<div class="forceWidth">'+data+'</div>';
  }
  return data;
}

Then use suitable CSS for div to force its width.

Also, you didn't mention the font size for the complete table, including the header, but maybe something could be done with the rendering function there also, I don't know.

Use CSS.

table.dataTable th,
table.dataTable td {
  font-size: 12px;
}

Allan

tomcat14

Allen,

Thank you for the examples.
You had a couple of missing closing ' but the code editor on live.datatables help me figure them out.

allan

Oops - so I did. Thanks. I've corrected them above should anyone else want to use that code.

Allan