Tabelas quebrando layout, Exemplo 4

Este documento destina-se a demonstrar os problemas que podem ocorrer quando tabelas de dados têm conteúdos com larguras maiores que a largura total definida para a tabela. Para maiores informações leia o artigo Tabelas quebrando layout.

Dados da Companhia
Nome Local Empregados Website
Companhia 1 Europa 10 000 A_longa_longa_URL_do_site_da_companhia_nesta_célula
Companhia 2 Europa 10 000 A_longa_longa_URL_do_site_desta_companhia_também_nesta_célula

Conteúdo secundário

Este texto foi colocado aqui para demonstrar o que acontece quando o conteúdo da tabela força a que ela se expanda por um comprimento maior do que aquele que o layout possa conter.

As seguintes regras CSS foram usadas para a tabela contida nesta página:

  1. table {
  2. table-layout:fixed;
  3. width:100%;
  4. overflow:hidden;
  5. border:1px solid #f00;
  6. word-wrap:break-word;
  7. }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus

Ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.