将 table 列宽设置为 100% 并固定 table-layout？

Question

在我的 table 中，我设置了 table-layout:fixed 宽度为 100%，这很好，但是 td 单元格的内容会转到另一个覆盖层。我知道 table 有很多专栏，所以我可能还会问你我怎样才能美化以获得更具可读性的 table。谢谢

    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

Answer 1

我的建议是问为什么会有这么多栏目？这样看，一个table不是详细的视图。它更像是一种导航工具，可以到达感兴趣的行。有时，但这种情况很少见，您需要将各行相互比较。然后 table 如果感兴趣。但这通常是出于科学目的。如果您可以引入详细信息视图，那么每一行都可以有一个指向详细信息页面的锚点 link。我可以看到这两个好处。

您可以在 table 中显示较少的列，然后解决列不适合的问题。
您也可以选择 ul 列表，并获得对移动设备等设备的支持。我会用图更新

Answer 2

您可以缩小字体或重组您的 table :

例子： font-size 通过 calc(10px + 0.5vw) 到屏幕宽度（如果使用，请将这些值重置为您的需要）.

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>

或使用 fontawsome class 将 table 分成 2 列以创建缺失的单元格。

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>

第二个片段灵感来自

将 table 列宽设置为 100% 并固定 table-layout？

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

css

fixed

column-width