質問: Boa noite! Estou aprendendo html + css, e gostaria de fazer com que as minhas 3 tabelas, fiquem lado a lado na horizontal mesmo que ultrapasse o limite direito da tela(habilitar a barra de rolagem) É possível fazer? Segue código abaixo: ``` Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 ```
回答: Além de adicionar o **display flex** na **div** que você está utilizando como **container** é necessário adicionar a propriedade **flex-shrink** como **0** na tabela, para que ela não se limite ao tamanho da janela. ``` #div1 { display: flex; } table { border: 1px solid #000; flex-shrink:0; } ``` ``` Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 Name Col 1 Col 2 Fr 10 Sa 11 Su 12 Mo 13 Tu 14 We 15 Th 16 Fr 17 Sa 18 Su 19 Mo 20 Tu 21 We 22 Th 23 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Click here $100 - $300 Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut. Click here $100 - $300 ```