---
title: "How to Use Custom Column Widths with Scrollable Tables in wpDataTables"
description: "A CSS workaround to apply fixed column widths while keeping horizontal scroll enabled"
url: https://help.wpdatatables.com/en/articles/59-how-to-use-custom-column-widths-with-scrollable-tables-in-wpdatatables
collection: "Examples"
updated: 2026-10-01
language: en
---

# How to Use Custom Column Widths with Scrollable Tables in wpDataTables

A CSS workaround to apply fixed column widths while keeping horizontal scroll enabled

### How to Set Custom Column Widths in Scrollable Tables?

By default, wpDataTables doesn’t allow you to combine the **“Scrollable”** option with **custom column widths** — because custom widths require enabling **“Limit Table Width”**, which automatically disables horizontal scroll, as explained in our [Documentation](https://wpdatatables.com/documentation/table-features/table-layout-and-word-wrap/).

There’s a **workaround** that allows you to:

✅ Enable horizontal scrolling  
✅ Define custom widths for one or more columns

* * *

### Step-by-step workaround:

1.  **Enable “Scrollable”** in the **Display** tab of your table settings.
    
2.  Add the following **custom CSS** to the table’s **Customize → Custom CSS** section:
    

```javascript
.wpDataTablesWrapper table.scroll.wpDataTableID-1 {     
    width: max-content !important;    
    table-layout: fixed !important;
}

.wpDataTableID-1 th.column-yourcolumn {     
    width: 300px !important;
}
```

-   Replace `wpDataTableID-1` with your actual table ID
    
-   Replace `yourcolumn` with the **original header name** of the column (see below)
    

* * *

### Example

Let’s say your table ID is `2671` and you want to set a fixed width for the `firstname` column.

Your CSS would look like this:

```javascript
.wpDataTablesWrapper table.scroll.wpDataTableID-1 {     
    width: max-content !important;    
    table-layout: fixed !important;
}

.wpDataTableID-1 th.column-yourcolumn {     
    width: 300px !important;
} 
```

![](https://staticfiles.gleap.io/helparticle/20250808170151_8381.png)![](https://staticfiles.gleap.io/helparticle/20250808170211_9028.png)