使表中的列仅与最长文本元素的文本一样宽

Question

我正试图将表的宽度从33.33%更改为auto，但每当我这样做时，它就会中断。我希望表中的每一列都只有最长文本元素的文本那么宽。

new PerfectScrollbar('#table tbody');

	    #table thead {
display: block;
width: 100%;
}
#table tbody {
display: block;
width: 100%;
}
#table tr {
display: block;
width: 100%;
}
#table tbody {
max-height: 370px;
overflow-y: auto;
overflow-x:hidden;
position: relative;
}
#table thead th {
background: #406AA3;
color: white;
}
#table tbody td {
display: block;
width: 33.33%;
float: left;
height: 41px;
}
#table thead th {
display: block;
width: 33.33%;
float: left;
border: 1px solid #dee2e6;
height: 41px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="row pt-2">
<div class="col-12">
<div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Name</th><th>Age</th><th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td><td>20</td><td>Student</td>
</tr>
<tr>
<td>Paul</td><td>23</td><td>Engineer</td>
</tr>
<tr>
<td>Chris</td><td>19</td><td>Human being</td>
</tr>
<tr>
<td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
</tr>
<tr>
<td>Jun</td><td>27</td><td>Hero</td>
</tr>
<tr>
<td>Yong</td><td>27</td><td>Money maker</td>
</tr>
<tr>
<td>Alex</td><td>20</td><td>Student</td>
</tr>
<tr>
<td>Paul</td><td>23</td><td>Engineer</td>
</tr>
<tr>
<td>Chris</td><td>19</td><td>Human being</td>
</tr>
<tr>
<td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
</tr>
<tr>
<td>Jun</td><td>27</td><td>Hero</td>
</tr>
<tr>
<td>Yong</td><td>27</td><td>Money maker</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

由于flebox是垂直或水平的，我认为flexbox不太适合，因为我们希望列关心它们的内容，但我们可以使用CSS Grid，它基本上是flexbox，只关心垂直和水平。

new PerfectScrollbar('.scroll');

*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.scroll {
border: 1px solid black;
display: inline-block;
max-height: 150px;
position: relative;
}
.grid {
display: grid;
grid-template-columns: auto auto auto;
}
.headercell {
padding: 10px;
background: dodgerblue;
position: sticky;
top: 0;
}
.tablecell {
padding: 10px;
background: #ccc;
}

<link rel="stylesheet" href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css">
<div class="scroll">
<div class="grid">
<div class="headercell">Name</div>
<div class="headercell">Long Column Header Age</div>
<div class="headercell">Occupation</div>
<div class="tablecell">Alex</div>
<div class="tablecell">20</div>
<div class="tablecell">Student</div>
<div class="tablecell ">Chris</div>
<div class="tablecell">20</div>
<div class="tablecell">Human Being</div>
<div class="tablecell ">Satoshi</div>
<div class="tablecell">20</div>
<div class="tablecell">Pokemon Trainer</div>
<div class="tablecell ">Yong</div>
<div class="tablecell">20</div>
<div class="tablecell">Engineer</div>
<div class="tablecell ">Long First Name...</div>
<div class="tablecell">20</div>
<div class="tablecell">Engineer</div>
<div class="tablecell ">Name</div>
<div class="tablecell">20</div>
<div class="tablecell">A Really Long Occupation</div>
</div>
</div>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>

Answer 2

我使用css display属性创建了该表。

.tableCell {
display: table-cell;
border: 1px solid #dee2e6;
height: 41px;
}
.tableRow {
display: table-row;
}
.table {
display: table;
width: 200px
}
.tableBody {
display: table-row-group;
}
.tableHeading {
display: table-header-group;
}
.tableHead {
display: table-cell;
background: #406AA3;
color: white;
border: 1px solid #dee2e6;
height: 41px;
}
.container {
overflow: auto;
max-height: 100px
}

<div class="container">
<div class="table">
<div class="tableHeading">
<div class="tableRow">
<div class="tableHead">Name</div>
<div class="tableHead">Age</div>
<div class="tableHead">Occupation</div>
</div>
</div>
<div class="tableBody">
<div class="tableRow">
<div class="tableCell ">Alex</div>
<div class="tableCell">20</div>
<div class="tableCell">Student</div>
</div>
<div class="tableRow">
<div class="tableCell ">CHris</div>
<div class="tableCell">20</div>
<div class="tableCell">Human Being</div>
</div>
<div class="tableRow">
<div class="tableCell ">Satoshi</div>
<div class="tableCell">20</div>
<div class="tableCell">Pokemon Trainer</div>
</div>
<div class="tableRow">
<div class="tableCell ">Yong</div>
<div class="tableCell">20</div>
<div class="tableCell">Engineer</div>
</div>
</div>
</div>
</div>

Answer 3

我最终使用了DataTables插件，它解决了我遇到的各种问题。