jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.11k stars 3.94k forks source link

Table is-narrow not working when applied to the whole table (as in class="table is-narrow") #3695

Open CarlosGrohmann opened 9 months ago

CarlosGrohmann commented 9 months ago

This is about Bulma .

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version 0.9.4 My browser is: Firefox

Description

I'm build a website using the Jekyll and the Bulma-clean-theme. I noticed that the modifier "is-narrow" is not being applied to the whole table, So it ends up being fullwidth, regardless of setting the whole table to be "is-narrow".

Steps to Reproduce

Since I'm using Jekyll, I added the table class for the whole table using

| Col1  | Col2  | Col3  | Col4  | Col5  |
|-------|-------|-------|-------|-------|
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
{: class="table is-bordered is-narrow is-striped"}

but the table was still in full width.

This theme has an /assets/css/app.scss file that can be used for customization. So I added:

.table {
  &.is-narrow {
    white-space: nowrap;
    width: 1%;
    }
}

This worked and my tables are now using only the proper space.

akshithagunupati commented 9 months ago

hi, is this issue fixed?