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

Question

我正在尝试将表格的宽度从 33.33% 宽度更改为自动，但每当我这样做时它就会中断。我希望表格中的每一列都与最长文本元素的文本一样宽。

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>