How to fill gap with CSS in this table

Question

codepen

<section class="page-section" id="Package">
  <div class="container-fluld">
    <div class="tabs">
      <div class="tab-button-outer">
        <ul id="tab-button">
          <li><a href="#tab01">A형</a></li>
          <li><a href="#tab02">B형</a></li>
          <li><a href="#tab03">맞뚜껑형</a></li>
          <li><a href="#tab04">상하짝Y형</a></li>
          <li><a href="#tab05">완전조립식</a></li>
          <li><a href="#tab01">종이손잡이형</a></li>
          <li><a href="#tab02">하우스형</a></li>
          <li><a href="#tab03">슬리브형</a></li>
          <li><a href="#tab04">싸바리</a></li>
          <li><a href="#tab05">표지바리</a></li>
          <li><a href="#tab01">RRP</a></li>
          <li><a href="#tab02">종이블리스터</a></li>
        </ul>
      </div>
      <div class="tab-select-outer">
        <select id="tab-select">
          <option value="#tab01">A형</option>
          <option value="#tab02">B형</option>
          <option value="#tab03">맞뚜껑형</option>
          <option value="#tab04">상하짝Y형</option>
          <option value="#tab05">완전조립식</option>
          <option value="#tab01">종이손잡이형</option>
          <option value="#tab01">하우스형</option>
          <option value="#tab02">슬리브형</option>
          <option value="#tab03">싸바리</option>
          <option value="#tab04">표지바리</option>
          <option value="#tab05">RRP</option>
          <option value="#tab02">종이블리스터</option>
        </select>
      </div>

      <div id="tab01" class="tab-contents">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
      </div>
      <div id="tab02" class="tab-contents">
        <h2>Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
      </div>
      <div id="tab03" class="tab-contents">
        <h2>Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
      </div>
      <div id="tab04" class="tab-contents">
        <h2>Tab 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
      </div>
      <div id="tab05" class="tab-contents">
        <h2>Tab 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
      </div>
    </div>
</section>

.tabs {
  margin: 0 auto;
  padding: 0 20px;
}

#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tab-button li {
  display: table-cell;
  width: 20%;
}

#tab-button li a {
  display: block;
  padding: 0.5em;
  background: #95a5a6;
  text-align: center;
  color: #000;
  text-decoration: none;
}

#tab-button li:not(:first-child) a {
  border-left: none;
}

#tab-button li a:hover,
#tab-button .is-active a {
  border-bottom-color: transparent;
  color: #ecf0f1;
  background: #3498db;
}

.tab-contents {
  padding: 0.5em 2em 1em;
}

.tab-button-outer {
  display: none;
}

.tab-contents {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }
  .tab-select-outer {
    display: none;
  }
  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

Hello, I'm implementing a tab. How can I fill up the empty space? Help me, please!

I used the display table through an example. Please let me know if there is a better way than this.

Answer 1

This is happening because some names of your tabs become too much for a box to hold at a certain resolution, so they drop down into the next line.

Here are some solutions that I can think of at the moment :

1. solution : You can reduce the font size of your tabs at certain resolution, just before they break, and try to keep them all in one line.

2. solution : You can insert a burger menu at a certain resolution instead of long line of tabs. Simply put a burger menu that will reveal those tabs in vertical aligment.

3. solution : You can change layout of your page, simply put all your tabs in vertical order, instead of horizontal order, that way they will stay in place without dropping in a new line, unless the resolution is super small and the text is too wide !

4. solution (only if you have no other choice) : You can try to make each of your tabs have text of same length, that way, all the text in all of your tabs will fall in a new line at the same time.

Other then that, no other solution crosses my mind at this moment. Hope I helped a bit. :)

Answer 2

Try changing the css code to -

#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tab-button li a {
  display: block;
  padding: 0.5em;
  background: #95a5a6;
  text-align: center;
  color: #000;
  text-decoration: none;
  height: 100%;
}

The child is taking full height of its parent.