03/10/2016 09:00. First I thought sWidth didn't work:
I have had to add 5 more fields to a datatable, with the names alone, they all fit perfectly in the body. My problem comes when I load the data, since one of the fields contains very extensive information and makes said field too long and this in turn makes said table stand out from the body, making the display of the page very ugly.
As you will see below, I have the autowidth property set to false and assigned some widths to try to prevent the problem I mentioned from occurring . I copy the code:
<script type="text/javascript">
var oTableTSC;
var index;
$(document).ready(function(){
$("#tabs").tabs();
oTableTSC = $('#tablaMT').dataTable({
"bJQueryUI": false,
"bAutoWidth": false,
"bLengthChange": false,
"sPaginationType": "full_numbers",
"bFilter":false,
"bPaginate": false,
"bInfo": false,
"bSort": false,
"aoColumns": [
{ "bSortable": false, "sWidth": "12%", "sClass": "center" },
{ "bSortable": false, "sWidth": "9%", "sClass": "center" },
{ "bSortable": false, "sWidth": "15%", "sClass": "center" },
{ "bSortable": false, "sWidth": "9%", "sClass": "center" },
{ "bSortable": false, "sWidth": "15%", "sClass": "center" },
{ "bSortable": false, "sWidth": "30%", "sClass": "center" },
{ "bSortable": false, "sWidth": "3%", "sClass": "center" },
{ "bSortable": false, "sWidth": "7%", "sClass": "center" }]
});
pintarTablaMT();
});
I have tried to copy in the css style page with a call to the id of the table, the datatable and something else that I don't remember word-wrap: break-word; and also assign a width to it so that it doesn't leave the container where the table is and it doesn't work. I have looked in debugging mode of the browsers if it takes these changes and takes them but they do not work since it continues to be displayed badly and I do not know what else to try.
I have also tried in the html part to give width of all types, by px, %, em, and it does not suffer any change, to the parent tables, to their containers, to all having the same size unit, etc.
03/10/2016 12:30. I continue testing things, I have looked at the data of an object which appears empty for this table and the columns take the width of the name of each column, which leads me to deduce that the error may be that the bAutoWidth property is not working: false they do not believe? What can I do to make it work?
03/10/2016 13:30. *I have given a width to the table and at the same time I have used table-layout: fixed; and what is the table itself is adjusted to the container, however a field with very extensive information continues to stand out even outside said container. I have tried this thanks to the information provided by @blonfu but what still does not work for me and could give me the solution is word-wrap: break-word; Someone knows what can occur?*
If anyone has any ideas to help me I would appreciate it.
If you look at the main example on the DataTables page , you'll see that by default the table has a class
nowrap
that affects bothth
andtd
with the rule:This is why you can't break the text even if you add
word-wrap: break
. The solution is to override that rule in your styles: