прокрутка переполнения не работает в таблице при использовании firefox

Question

Я пытаюсь показать полосу прокрутки в моей таблице, если значение ячейки слишком длинное, я попробовал ее с overflow, но, как вы можете видеть, она не работает, нет полосы прокрутки слово отображается в его полная длина

table { 
 
    border: 1px solid black; 
 
} 
 

 
table td { 
 
    border: 1px solid black; 
 
} 
 

 
table th { 
 
    border: 1px solid black; 
 
} 
 

 
.test { 
 
    overflow: scroll; 
 
    color: red; 
 
    max-width: 50px; 
 
}

<table> 
 
<tr> 
 
    <th class="test">Filename</th> 
 
    <th>value</th> 
 
</tr> 
 
<tr> 
 
    <td class="test">Very long filename for demonstration</td> 
 
    <td>Test</td> 
 
</tr> 
 
</table>

UPDATE:

Я просто заметил, что скроллбары показывают, если НМА m с помощью браузера Chrome, но не, если я использую Firefox. Так что unfortunatelly overflow похоже не совместим с firefox.

Answer 1

Если вы объявляете

.test { 
display:inline-block; 
white-space: nowrap; 
overflow-x: scroll; 
} 

то overflow:scroll будет работать в Firefox, а также:

table { 
 
    border: 1px solid black; 
 
} 
 

 
table td { 
 
    border: 1px solid black; 
 
} 
 

 
table th { 
 
    border: 1px solid black; 
 
} 
 

 
.test { 
 
    color: red; 
 
    display: inline-block; 
 
    max-width: 50px; 
 
    white-space: nowrap; 
 
    overflow-x: scroll; 
 
}

<table> 
 
<tr> 
 
    <th class="test">Filename</th> 
 
    <th>value</th> 
 
</tr> 
 
<tr> 
 
    <td class="test">Very long filename for demonstration</td> 
 
    <td>Test</td> 
 
</tr> 
 
</table>

---

Вариант 2:

Основные изменения:

• td имеет display: block; вместо display: inline-block;
• td имеет overflow:auto; вместо overflow:scroll;

table, td { 
 
    border: 1px solid black; 
 
} 
 

 
td { 
 
    color: red; 
 
    display: block; 
 
    max-width: 120px; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
}

<table> 
 
<tr><td>account_requests</td></tr> 
 
<tr><td>backend.template</td></tr> 
 
<tr><td>firmware.host</td></tr> 
 
<tr><td>frontend.template</td></tr> 
 
<tr><td>license.host</td></tr> 
 
<tr><td>licensing.host</td></tr> 
 
<tr><td>mail.auto_smtp_authentification_password</td></tr> 
 
</table>