Forcing the table and its cells to have fix width - html

Question

I am working with a web template , which have define the following inside a CSS file:-
div.dataTables_length select {
width: 50px;
}
.dataTables_filter input, .dataTables_length select {
display: inline-block;
margin-bottom: 0;
}
And the table is defined as follow:-
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th></th> <th></th>
</tr></thead>
<tbody>
<tr>
Btu currently I am facing a problem is that the template will automatically truncate the value and display only part of it. So for example if there is a long description value the cell might display part of it. So is there a way to modify the table so that it will have the following:-
The table cell will always have the same width, but dynamic height.
The table should always have the same width, so it will not go out of layout in case there is a long text.
To display the full text of each field, and the cell should atomically move to a new line.
Regards
:::EDIT:::
This is how the table will be displayed incase the table columns contain long test:-

Answer 1

The question of truncation has already been addressed in the comments. I will address the width of the table.
If you want to set the width of a table column you need to either set the same width for all columns or give specific widths to certain columns.
.table th, .table td { width: 50px; } /* sets the default value of all columns */
.table .name { width: 100px; word-wrap: break-word; } /* overrides the default with specific value for certain column*/
<table class="table">
<tr>
<td class="name">James T. Kirk</td>
<td class="name">Spock</td>
</tr>
</table>
I would shy away from using percentage (%) on column widths, especially if the text will fluctuate in length.
EDIT -
I see what you mean. You need to put a css style of word-wrap: break-word; I updated the code above and made a jsfiddle demo.