[Bug report]: Min-width on table
Closed this issue · 4 comments
mmexvr commented
Requirements before reporting
- No duplicated issue reported.
- I have read the contribution guidelines.
- I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
- I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
- I have followed the installation guide.
Package
@scania/components, @scania/theme-light
Package versions
4.0.0+
Browser
Chrome
Framework
Plain HTML
Version
Any
Reproduction steps
- Create two tables with 3 columns and a few rows
- Put the tables inside the grid so they can be next to each other without jumping down a row
- Make the window smaller (see video below)
- See error when the
Code example
<style>
table tr th,
table tr td {
/* min-width: unset !important; */
}
</style>
<div class="sdds-container">
<div class="sdds-row">
<div class="sdds-col-xs-12 sdds-col-sm-6 sdds-col-md-6">
<table class="sdds-table sdds-table--divider">
<thead class="sdds-table__header">
<tr class="sdds-table__row">
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
</tr>
</thead>
<tbody class="sdds-table__body">
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 1
</td>
</tr>
</tbody>
</table>
</div>
<div class="sdds-col-xs-12 sdds-col-sm-6 sdds-col-md-6">
<table class="sdds-table sdds-table--divider">
<thead class="sdds-table__header">
<tr class="sdds-table__row">
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
<th class="sdds-table__header-cell sdds-u-pl2 sdds-u-pr2">
Header
</th>
</tr>
</thead>
<tbody class="sdds-table__body">
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
</tr>
<tr class="sdds-table__row">
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
<td class="sdds-table__body-cell sdds-u-pl2 sdds-u-pr2">
table 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Screenshots
Screen.Recording.2022-04-26.at.15.29.25.mov
Screen.Recording.2022-04-26.at.15.32.34.mov
Expected behaviour
Two tables should be able to fit next to each other without any problem
- Remove min-width works on th and td
Console errors
No response
Contact information
No response
alexlioliopoulos commented
Thanks for reporting! We will soon have a look on this.
areblk commented
This feature, specific for html table, has also been requested from IRBI team in teams channel. @alexlioliopoulos
alexlioliopoulos commented
@theJohnnyMe have we fixed this?
alexlioliopoulos commented
Documentation on how to get this fixed has been added to our documentation site.