小贝子编程

将表格列宽设置为 100%，表格布局固定?



在我的表格中，我设置了一个表格布局：固定的宽度为100%，这很棒，但是td单元格的内容转到另一个叠加层。我知道表格有很多列，所以我也可以问你如何美化以获得更具可读性的表格。 谢谢

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;
}

表图像预览

您可以缩小字体或重组表格：

例子： 通过calc(10px + 0.5vw)font-size到屏幕宽度(如果使用，请根据需要重置这些值(。

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 类将表分成 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>

第二个片段的灵感来自 如何堆叠表列以模拟日历议程视图？

我的建议是问为什么有这么多列？这样看，表格不是详细视图。它更像是一个导航工具，用于到达感兴趣的行。有时，但这非常罕见，您需要将行相互比较。然后是一张表(如果感兴趣(。但这通常是出于科学目的。如果可以引入详细信息视图，则每一行都可以具有指向详细信息页面的锚链接。我可以看到这样做的两个好处。

  1. 您可以在表中显示较少的列，然后解决列不适合的问题。

  2. 您可以选择一个ul列表，并获得对移动设备等设备的支持。我会用图片更新

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium