Fixing overflow issues when the width of the column is unknown

devCleverName Source

I am working on displaying data from a database on a web page.

My problem is that some of the data is very long and does not contain spaces (think very long path names), so it overflows the table without wrapping.

Currently the widths of the columns are determined using table-layout:auto, because I am working with a lot of different databases and tables, so I do not want to hard code the widths.

Therefore, when I try and use overflow:wrap, it just breaks the other columns into one-letter-wide messes.

Here are some of my ideas (none of which I can get to work):

  1. Use table-layout:auto to calculate the suggested widths, set the widths to be those values, and then set overflow:wrap.

  2. Tell the browser to break at characters other than just spaces, i.e. '/'.

  3. Only set overflow:wrap if a column is longer than a certain amount.

I am currently using CSS and a little bit of JavaScript.

Any other ideas?

javascriptcss

Answers

answered 2 months ago MrMins #1

You have to use:

max-width and overflow-x properties in your css

.table tr td {
   max-width: 100px;
    overflow-x: hidden;
    border: 1px solid #ff0000; 
}
<table class="table">
    <tr>
      <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
       <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
         <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
    </tr>

<table>

answered 2 months ago tsjnsn #2

Some simple solutions that come to mind:

Use ellipses with manually triggered expansion for lines > N chars

/a/really/long/file/name/that/is/really/just/too/l... [expand]

This can work when the data you're showing doesn't really need to be visible all the time, and the user can choose to view all of it if they are interested. With this one, you don't need to worry about what type of information each cell has.

Data-specific column widths

If you know the type of data that will appear in your columns, you can define a mapping to resize the widths of the columns.

This requires some extra work to get the column types and configure the mappings, and then resizing the columns.

{ dataTypeWidths: { default: 'auto', filename: '300px' } }

answered 2 months ago Alyson Maia #3

You can set a max-width combined with overflow-x: hidden and text-overflow: ellipsi, i think that will resolve your problem.

td {
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}
<table>
  <tr>
    <td>Loremipsumdolorsitamet,consecteturadipiscingelit.Integertellusmassa,fringillaacquamnec,temporconguelectus.Sedimperdietaclacusidtempus.Sedutfelisaduiiaculistemporinasapien.Integervelliberomi.Morbiutenimsagittis,sollicitudinipsumin,ullamcorpersapien.Phasellusidfelisatligulatristiquehendrerit.Nuncsitametipsumidquamtinciduntfacilisis.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.Namsitametdictumeros.</td>
    <td>Pellentesquefermentummattisleo,sedblandittortorhendreritnec.Vestibulumeuturpislacus.Fusceliberorisus,dignissimegetsodalesnon,dictuminsem.Quisqueblanditmiante,eutristiqueorciporttitorsitamet.Donecpretium,eratetaccumsanfringilla,velitjustotristiqueorci,sedfringillaquamrisusnonenim.Praesenthendreritmassaultriceseratmalesuadapretium.Aeneansitametnuncsodales,vehiculaeroseget,ornarelorem.Proinquisfermentumsapien,utvehiculafelis.Duisquiseleifendleo.Suspendisseinnequefringilla,tristiquelectuseu,fermentumdiam.Nuncmassalectus,aliquamidmassaeu,pretiumullamcorperlectus.Aliquamfeugiatexegetornaretincidunt.Donectristiqueeratseddiamvehiculaauctor.Proinorcijusto,consecteturegetcursusut,pellentesquevelleo.Nampulvinarrisusetnislfacilisisaliquam.</td>
    <td>Inhachabitasseplateadictumst.Craspulvinarsuscipitfelis,ullamcorperpulvinarlorem.Vivamuspulvinarinterdumlibero.Maurisvenenatisaugueodio,aultriceserossuscipitvel.Donecutfelissitameteratconsecteturbibendumegetetnulla.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Crastempus,magnavelelementumlobortis,ipsummassaporttitorarcu,mollisvehiculaanteenimvitaelectus.Fuscemolliseumagnaapretium.Praesentegestasaugueanuncultricies,ataliquamodiodignissim.Insagittismaurisest,sedlacinialeoornareeu.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namrisusaugue,gravidasedullamcorperin,feugiatetdolor.Maurisposuerenuncquam,necdignissimmassagravidatincidunt.Quisquesemperdiamlibero,intemporlectusullamcorperut.</td>
    <td>Suspendissevenenatisaliquamsapientinciduntconsequat.Aliquamveldiamegetsapienvehiculadapibus.Namblanditamagnaquisiaculis.Orcivariusnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Orcivariusnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Quisquelacinianunclorem,ultriciesvolutpatduifinibusquis.Praesentmalesuada,odioeuconsequatgravida,nisllacussagittismagna,sitametultriciesquamtellusporttitorelit.Fusceduilorem,viverraquisipsumet,pulvinaraliquamaugue.Donecinterdumscelerisquequamidfaucibus.Sedmollistinciduntquam,ideleifenddiammaximusa.Sedvitaemagnanonlectushendreritlacinia.Donecvenenatisauguevitaepulvinarpulvinar.Etiamposuereapurusetplacerat.Pellentesquefinibusdictumimperdiet.Crascursusfelisvelpellentesquerutrum.</td>
  </tr>
<table>

answered 2 months ago Amr Elgarhy #4

What about using the:

word-break: break-word;

this will keep the columns widths and will show all the data

.table tr td {
   max-width: 100px;
    overflow-x: hidden;
    border: 1px solid #ff0000; 
    word-break: break-word;
}
<table class="table">
    <tr>
      <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
       <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
         <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
    </tr>

<table>

Code snippet copied from @MrMins answer and updated.

comments powered by Disqus