Search code examples
cssfixedcolumn-width

Set the table column width 100% with table-layout fixed?

in my table I set a table-layout:fixed with a width of 100% and it's great, however the content of td cells goes to the other overlaying. I know that the table has a lot of column so I may ask you also how can I beautify to have a more readable table. Thank you

    table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
  width:100%;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

Table Image Preview

Solution

  • You can downsize the font or restructure your table :

    examples : font-size to screenwidth via calc(10px + 0.5vw) (reset those values to your needs if used).

    table {
  width: 100%;
  table-layout: fixed;
  font-size: calc(10px + 0.5vw);
}
input {
  max-width: 100%;
  box-sizing: border-box;
}
input:focus {
  position: absolute;
  max-width: auto;
  background: lightgray;
}
th,
td {
  border: 1px solid;
  width: max-content;
  text-align: center;
}
thead td {
  text-align: left;
  vertical-align: top;
}
tbody {
  counter-reset: trs;
}
tbody tr {
  counter-increment: trs;
}
tbody tr td:first-child::before {
  content: 'N° 'counter(trs);
}
td.fa {display:table-cell;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <thead>
    <tr>
      <th>N.</th>
      <th><b class="fa fa-wrench"></b></th>        
      <th><b class="fa fa-certificate"></b></th>      
      <th><b class="fa fa-user-tie"></b></th>      
      <th>IP</th>      
      <th><b class="fa fa-link"></b></th>      
      <th><b class="fa fa-door-open"></b></th>      
      <th><b class="fa fa-server"></b></th>      
      <th><b class="fa fa-user-circle"></b></th>      
      <th><b class="fa fa-key"></b></th>      
      <th><b class="fa fa-dice-d20"></b></th>      
      <th><b class="fa fa-wrench"></b></th>      
      <th><b class="fa fa-file-alt"></b></th>
      <th>$dat</th>
      <th>$scodiceutum</th>
        </tr>
    <tr> 
      <td></td>
      <td></td>
      <td></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
      <td><input type=search placeholder="&#128269;"/></td>
    </tr>
    </thead>
  <tbody>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr> 
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>     
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>    
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>  
    <tr>      
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr> 
    <tr>        
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>        
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
  </tbody>
</table>

    or break the table into 2 columns using the fontawsome class to create the missing cells.

    table {
  width: 100%;
  table-layout: fixed;
  font-size: calc(10px + 0.5vw);
}

input {
  max-width: 100%;
  box-sizing: border-box;
}

input:focus {
  position: absolute;
  max-width: auto;
  background: lightgray;
}

th,
td {
  border: 1px solid;
  width: min-content;
  text-align: center;
}

thead td {
  text-align: left;
  vertical-align: top;
}

tbody {
  counter-reset: trs;
}

tbody tr {
  counter-increment: trs;
}

tbody tr td:first-child::before {
  content: 'datas user N° 'counter(trs);
}

td.fa {
  display: table-cell;
}

@media screen and (max-width: 1200px) {
  input {
    width: auto;
  }
  thead,
  thead tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%
  }
  thead td {
    flex: 1;
  }
  thead tr td:empty,
  thead tr:first-child {
    display: none;
  }
  tbody td:first-child {
    background: tomato;
  }
  table,
  thead,
  tbody,
  tr {
    display: block;
  }
  tbody tr td.fa {
    display: table!important;
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
  }
  tbody tr td:not(:first-child).fa::before {
    display: table-cell;
    text-align: center;
    border-right: solid;
    vertical-align: middle;
    padding: 0.25em;
    width: 25%;
  }
  td.wrench::before {
    content: "\f0ad";
  }
  td.certificate::before {
    content: "\f0a3";
  }
  td.user-tie::before {
    content: "\f508";
  }
  td.IP::before {
    content: "IP";
  }
  td.link::before {
    content: "\f0c1";
  }
  td.door-open::before {
    content: "\f52b";
  }
  td.server::before {
    content: "\f233";
  }
  td.user-circle::before {
    content: "\f2bd";
  }
  td.key::before {
    content: "\f084";
  }
  td.dice-d20::before {
    content: "\f6cf";
  }
  td.file-alt::before {
    content: "\f15c";
  }
  td.data::before {
    content: "$DATA";
  }
  td.codice::before {
    content: "$CODICE...";
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <thead>
    <tr>
      <th>N.</th>
      <th><b class="fa fa-wrench"></b></th>
      <th><b class="fa fa-certificate"></b></th>
      <th><b class="fa fa-user-tie"></b></th>
      <th>IP</th>
      <th><b class="fa fa-link"></b></th>
      <th><b class="fa fa-door-open"></b></th>
      <th><b class="fa fa-server"></b></th>
      <th><b class="fa fa-user-circle"></b></th>
      <th><b class="fa fa-key"></b></th>
      <th><b class="fa fa-dice-d20"></b></th>
      <th><b class="fa fa-wrench"></b></th>
      <th><b class="fa fa-file-alt"></b></th>
      <th>$dat</th>
      <th>$scodiceutum</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269;" /></td>
      <td><input type=search placeholder="&#128269; $myVar" /></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
    <tr>
      <td class="fa"></td>
      <td class=" fa wrench">
        <b class="fa fa-pencil-alt green"></b>
        <b class="fa fa-trash-alt red"></b>
      </td>
      <td class="fa certificate">cell</td>
      <td class="fa user-tie"> cell</td>
      <td class="fa IP">cell</td>
      <td class="fa link">cell</td>
      <td class="fa door-open">cell</td>
      <td class="fa server">cell</td>
      <td class="fa user-circle">cell</td>
      <td class="fa key">cell</td>
      <td class="fa dice-d20">cell</td>
      <td class="fa wrench">cell</td>
      <td class="fa file-alt">cell</td>
      <td class="fa data">cell</td>
      <td class="fa codice">cell</td>
    </tr>
  </tbody>
</table>

    second snippet inspired from How to stack table columns to simulate calendar agenda view?