how to set same columns in html tables?

Question

I am trying to make same column size table...but if the content is more than column size automatically increase ...why is it like this ?

this is my html code :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
   table {
        background-color: #eaeaea;
        width : 80%;
        border: 1px solid ; 
    }
     td {

        width : 20%;
        border: 1px solid ; 
    }
    </style>
    </head>
    <body>
   <table>
    <tr>
        <td>Alfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds </td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>GermanyGermanyGermanyGermanyGermanyGermany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td></td>
        <td></td>
      </tr>
</table>
 </body>
  </html>

this is my o/p:

Ok so I havent touched in HTML for quite sometime but what you want to achive it's quite complicated. Check this Fiddle https://jsfiddle.net/1tdfkb4c/1/. Even if you set a fixed width he will go off. Tables need to be dynamic and lets be honest, there wont be a word that big, because the problem is that HTML wont break big words by itself (The way we do when we write using the -). Check this link https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div it might help you :) — DanielPanic, Jun 15 '18 at 16:25
ya I can understand that word won't be that big but instead of the word there is a link then the columns size is an increase ...even though if word small also column size is decrease. — JYOTI SAPARIYA, Jun 15 '18 at 18:52

score 2 · Accepted Answer · answered Jun 15 '18 at 19:13

Add table-layout:fixed to table and word-wrap to cells.

Like that:

table {
    background-color: #eaeaea;
    width : 80%;
    border: 1px solid ; 
    table-layout: fixed;
}
 td {

    width : 20%;
    border: 1px solid ; 
    word-wrap: break-word;
}

how to set same columns in html tables?

1 Answers1