html - HTML CSS ulli 自動幅

Question

私はこの質問に対する答えを探しましたが、運がありません!

これは私が達成しようとしているものです:

私が欲しいのはul li、特定のページにあるタブの量に応じてタブの幅を自動調整することです。各ページのタブの数は変更されますが、タブを自動幅にする方法が見つかりません。

コード：

#tabs {
  height: 30px;
}

#tabs>ul {
  font-size: 1em;
  list-style: none;
  width: 100%;
  display: table;
  table-layout: fixed;
}

#tabs>ul>li {
  margin: 0 0px 0 0;
  padding: 7px 10px;
  display: block;
  float: left;
  display: table-cell;
  width: auto;
  background: #C9C9C9;
  text-align: center;
}

<div id="tabs">
  <ul>
    <li id="tabHeader_1">Page 1</li>
    <li id="tabHeader_2">Page 2</li>
    <li id="tabHeader_3">Page 3</li>
    <li id="tabHeader_4">Page 4</li>
    <li id="tabHeader_5">Page 5</li>
  </ul>
</div>
<div class="tab-content" id="tab_1">
  <h2>Page 1</h2>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_2">
  <h2>Page 2</h2>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_3">
  <h2>Page 3</h2>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_4">
  <h2>Page 3</h2>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_5">
  <h2>Page 3</h2>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>

<li>の自動幅を作成する試みはすべて失敗しました。すべてのヘルプは大歓迎です!