ширина заголовка таблицы для фиксированного заголовка начальной загрузки - PullRequest
Новая
       27

ширина заголовка таблицы для фиксированного заголовка начальной загрузки

0 голосов
/ 02 января 2019

Я пытаюсь сохранить заголовок и прокрутить часть тела. Но я сталкиваюсь с проблемой, касающейся ширины заголовка таблицы. Есть ли способ решить проблему, не назначая предопределенную ширину, потому что для длинных заголовков ширина будет проблемой, перекрывающей следующий заголовок? 

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
 
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class=" table table-bordered  fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description of it </th>
           <th>Name</th>
      <th>Color</th>
      <th>Description</th>
           <th>Name</th>
      <th>Color</th>
      <th>Description</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.These are red.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
       <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
   
  </tbody>
</table>
...