StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODatatables - Setting column width
primarykey
Id
19819597
data
AcceptedAnswerId
20037802
AnswerCount
10
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-11-06T18:13:37.937
FavoriteCount
2
LastActivityDate
2018-08-03T14:36:29.810
LastEditDate
2013-11-12T14:31:51.060
LastEditorUserId
1392154
OwnerUserId
1392154
ParentId
0
PostTypeId
1
Score
21
ViewCount
64661
LastEditorDisplayName
text
Body
I'm trying to set up width of columns as shown below: <pre><code> var per_page = $("table").data("per_page"); $(".table").dataTable({ "aoColumnDefs": [ { "sWidth": "100px", "aTargets": [ 1 ] }, { "sWidth": "100px", "aTargets": [ 2 ] }, { "sWidth": "100px", "aTargets": [ 3 ] }, { "sWidth": "100px", "aTargets": [ 4 ] }, { "sWidth": "100px", "aTargets": [ 5 ] }, { "sWidth": "100px", "aTargets": [ 6 ] }, { "sWidth": "100px", "aTargets": [ 7 ] } ], "aoColumns" : [ { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, { "sWidth": "100px"}, ], bJQueryUI: true, iDisplayLength: per_page, "fnDrawCallback": function( oSettings ) { if (oSettings._iDisplayLength == per_page) return true else { $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength}) .done(function(data){ if (data.success) per_page = oSettings._iDisplayLength; }); } } }) </code></pre> But resulting column width is not that i'm trying to set. could you help me please? Update 1 I've updated my initialization code as follows, but bumped into strange behavior on IE 9: Ie takes the longest field, devides it into lines , and takes it's length as default for all rows of this column. <pre><code> var per_page = $("table").data("per_page"); $(".table").dataTable({ sScrollX: "100%", aoColumns : [ { "sWidth": "15%"}, { "sWidth": "15%"}, { "sWidth": "15%"}, { "sWidth": "15%"}, { "sWidth": "15%"}, { "sWidth": "15%"}, { "sWidth": "15%"}, ], bJQueryUI: true, iDisplayLength: per_page, "fnDrawCallback": function( oSettings ) { if (oSettings._iDisplayLength == per_page) return true else { $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength}) .done(function(data){ if (data.success) per_page = oSettings._iDisplayLength; }); } } }) </code></pre> Update 2 I've updated code as shown below, the result in ie 9 is that the heading of the datatable is resized to new size, but the rest of the table is untouched by changes , see screenshot <a href="http://gyazo.com/282967b051366b18634d4e778205c938" rel="noreferrer">http://gyazo.com/282967b051366b18634d4e778205c938</a> init code: <pre><code> var per_page = $("table").data("per_page"); var datTable = $(".table").dataTable({ sScrollX: "100%", sScrollX: "500px", aoColumnDefs: [ { bSortable: false, aTargets: [ 4, 5,6 ] }, { sWidth: "16%", aTargets: [ 1, 2,3,4,5,6 ] }, ], bJQueryUI: true, sAutoWidth: false, iDisplayLength: per_page, "fnDrawCallback": function( oSettings ) { if (oSettings._iDisplayLength == per_page) return true else { $.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength}) .done(function(data){ if (data.success) per_page = oSettings._iDisplayLength; }); } } }) </code></pre> How can I fix this behavior ?
Tags
<javascript><datatables><jquery-datatables>
Title
Datatables - Setting column width
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USElmor
UserOwnerUserId
1. USElmor
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PODatatables - Setting column width
 UserUserId
 USElmor
 VoteTypeVoteTypeId
 VTBountyStart
2. VO
 singulars
 PostPostId
 PODatatables - Setting column width
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PODatatables - Setting column width
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.