Columns.width - DataTables

Trang chủ » Html Set Column Width Table » Columns.width - DataTables

Có thể bạn quan tâm

DataTables Advanced interactionfeatures for your tables. Editor Comprehensive editinglibrary for DataTables. Manual Download Search... {hero}
  • Examples
  • Manual
  • Reference
    • Options
    • Features
    • API
    • Events
    • Buttons
    • Content
    • Types
  • Extensions
  • Plug-ins
  • Blog
  • Forums
  • Support
  • FAQs
  • Download
  • Purchase
≡ Show site navigation columns.width Since: DataTables 1.10

Column width assignment.

Description

This parameter can be used to define the width of a column, and may take any CSS value (3em, 20px etc).

Please note that pixel perfect column width is virtually impossible to achieve in tables with dynamic content, so do not be surprised if the width of the column is off by a few pixels from what you assign using this property. Column width in tables depends upon many properties such as cell borders, table borders, the border-collapse property, the content of the table and many other properties. Both DataTables and the browsers attempt to lay the table out in an optimal manner taking this options all into account.

Type

This option can be given in the following type(s):

  • string

Default

Auto-detected from the table's content.

Examples

Set the first column's width to 20% with columnDefs:

new DataTable('#myTable', { columnDefs: [{ width: '20%', targets: 0 }] });

Set the first column's width to 20% with columns:

new DataTable('#myTable', { columns: [{ width: '20%' }, null, null, null, null] });

Related

The following options are directly related and may also be useful in your application development.

API
  • columns.adjust()
Options
  • autoWidth
Page navigation

DataTables

DataTables designed and created by SpryMedia Ltd. © 2007-2025 MIT licensed. Privacy policy. Supporters. SpryMedia Ltd is registered in Scotland, company no. SC456502.

Từ khóa » Html Set Column Width Table