Question

我为我的应用程序制作了一些引导程序表但是我被堆叠在垂直滚动上。我可以在overflow-y，display to block和given height的帮助下执行此操作，并按预期滚动，但是当我的一个表格标题文本字符很少时它就会被捕获整个桌子的宽度。我想我在这里想念一些东西。请参阅here。

我是否需要创建另一个类来解决只有一个问题表？或者有更好的方法来完成这项工作。

HTML：

＆＃13;

.table-earnings {
  background: #F3F5F6;
}
table {
  display: block;
  height: 200px;
  overflow-y: auto;
}

＆＃13;

<div class="container">
  <br>
  <div class="row">
    <div class="col-xs-8">
      <table class="table table-earnings table-earnings__challenge">
        <thead>
          <tr>
            <th>TITLE</th>
            <th>DATE TAKEN</th>
            <th>STATUS</th>
            <th>AMOUNT</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将表格包装在div中可以解决您的问题。

默认import json import csv with open('C:\\folder\\test.txt',"r") as file: data = json.load(file) with open('C:\\folder\\test.csv',"w",newline='') as file: csv_file = csv.writer(file) for item in data["devices"]: csv_file.writerow([item['tags'][0]['id'], item['tags'][0]['name'], item['tags'][0]['dataType'], item['tags'][0]['description'], item['tags'][0]['alarm'], item['tags'][0]['value'], item['tags'][0]['quality'], item['tags'][0]['devId']])需要table，在您的代码中，您通过更改其display:table来更改其自然行为。这绝对会造成混乱。

display to block

＆＃13;

.table-wrapper {
  max-height: 100px;
  overflow: auto;
  display:inline-block;
}

＆＃13;

.table-wrapper {
  max-height: 100px;
  overflow: auto;
  display:inline-block;
}
.table-earnings {
  background: #F3F5F6;
}

＆＃13;

<强> Updated fiddle

Bootstrap表垂直滚动

1 个答案: