https://github.com/mdbootstrap/bootstrap-table-column-width

Responsive Table column width built with Bootstrap 5. Use one of the following classes to manipulate the width of the columns.
https://github.com/mdbootstrap/bootstrap-table-column-width

bootstrap bootstrap-column bootstrap-table bootstrap-table-column-width bootstrap-template bootstrap-theme bootstrap-width bootstrap5 html

Last synced: 12 months ago
JSON representation

Responsive Table column width built with Bootstrap 5. Use one of the following classes to manipulate the width of the columns.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-table-column-width
Owner: mdbootstrap
License: other
Created: 2022-09-20T14:13:36.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-09-20T14:46:28.000Z (over 3 years ago)
Last Synced: 2025-02-12T19:43:19.524Z (about 1 year ago)
Topics: bootstrap, bootstrap-column, bootstrap-table, bootstrap-table-column-width, bootstrap-template, bootstrap-theme, bootstrap-width, bootstrap5, html
Language: SCSS
Homepage: https://mdbootstrap.com/docs/standard/extended/table-column-width/
Size: 1.07 MB
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Table column width built with Bootstrap 5. Use one of the following classes to manipulate the width of the columns.

Check out [Bootstrap Table column width Documentation](https://mdbootstrap.com/docs/standard/extended/table-column-width/) for detailed instructions & even more examples.

## Basic example

[Bootstrap Table column with auto width:
![Bootstrap 5 Table column width](/assets/with-auto-width.png)](https://mdbootstrap.com/docs/standard/extended/table-column-width/#section-with-auto-width)

```html

#
Name
Surname
Country
City
Position
Age

1
Kate
Moss
USA
New York City
Web Designer
23

2
Anna
Wintour
United Kingdom
London
Frontend Developer
36

3
Tom
Bond
Spain
Madrid
Photographer
25

4
Jerry
Horwitz
Italy
Bari
Editor-in-chief
41

5
Janis
Joplin
Poland
Warsaw
Video Maker
39

6
Gary
Winogrand
Germany
Berlin
Photographer
37

7
Angie
Smith
USA
San Francisco
Teacher
52

8
John
Mattis
France
Paris
Actor
28

9
Otto
Morris
Germany
Munich
Singer
35

```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Table column with minimal width:
![Bootstrap 5 Table column width](/assets/with-minimal-width.png)](https://mdbootstrap.com/docs/standard/extended/table-column-width/#section-with-minimal-width)

[Bootstrap Table column with fixed width:
![Bootstrap 5 Table column width](/assets/with-fixed-width.png)](https://mdbootstrap.com/docs/standard/extended/table-column-width/#section-with-fixed-width)

[Bootstrap Table column with text-nowrap:
![Bootstrap 5 Table column width](/assets/with-text-nowrap.png)](https://mdbootstrap.com/docs/standard/extended/table-column-width/#section-with-text-nowrap)

___

## More extended Bootstrap documentation