Как исправить bootstrap заголовок таблицы - PullRequest
Новая
       89

Как исправить bootstrap заголовок таблицы

1 голос
/ 05 августа 2020

Я пытаюсь установить фиксированный заголовок таблицы, но не могу решить эту проблему. Хочу горизонтальную и вертикальную прокрутку в таблице. Если пользователь прокручивает вертикально, я хочу, чтобы заголовок был исправлен, а не прокручивал содержимое таблицы. Прикреплю пример кода; пожалуйста, запустите это. Может ли кто-нибудь помочь мне решить эту проблему. Спасибо 

table {
  border-collapse: collapse;
  width: 70vw !important;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #efefef;
}

tbody {
  display: inline-block;
}

tbody {
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Project Name</th>
      <th>Type</th>
      <th>Reservation Amount</th>
      <th>Down Payment</th>
      <th>Installment Plan</th>
      <th>Possession Charges</th>
      <th>Monthly Installaments</th>
      <th>Category Charges</th>
      <th>Rent Available </th>
      <th>Full Payment Discount</th>
      <th>Custom Field</th>
      <th>Date Created</th>
      <th># of Floors</th>
      <th># of Units</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>114</td>
      <td>Project 1 </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>3</td>
      <td>8</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>111</td>
      <td>Project 2 </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>60 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span><span>, field 3 </span></td>
      <td>2020-07-21</td>
      <td>5</td>
      <td>75</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>112</td>
      <td>Project 3  </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>1</td>
      <td>50</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>119</td>
      <td>Project 4 </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>113</td>
      <td>Project 5 </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>2</td>
      <td>3</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>120</td>
      <td>Project 6</td>
      <td>Mall</td>
      <td>50</td>
      <td>1 %</td>
      <td>10 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>30 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>121</td>
      <td>Project 7</td>
      <td>Residential</td>
      <td>340000</td>
      <td>2 %</td>
      <td>10 Year</td>
      <td>30 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>5000 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>13</td>
      <td>1</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>123</td>
      <td>Project 8 </td>
      <td>Mall</td>
      <td>787</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>10 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-22</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>126</td>
      <td>Project 9 </td>
      <td>Hotel</td>
      <td>45</td>
      <td>2 %</td>
      <td>5 Year</td>
      <td>20 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>30 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-22</td>
      <td>5</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>127</td>
      <td>Project 10 </td>
      <td>Mall</td>
      <td>45</td>
      <td>1 %</td>
      <td>5 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>custom field 1</span><span>, custom field 2</span></td>
      <td>2020-07-23</td>
      <td>1</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>
...