Question

我有一张桌子，我想改变它的高度，但是当我在css中添加hieght元素时，没有任何变化，我也尝试了stackoverflow（Not able to set table height）的解决方案，但似乎没有任何效果。我在做什么错了？

HTML-

 <div class="tableDiv">
       <table class="table table-bordered table-condensed" id="StoreData">
         <thead>
             <tr>
                <th>County / Admin district</th>
                <th>Postcode</th>
                <th>Longitude</th>
                <th>Latitude</th>
             </tr>
           </thead>
           {% for Postcode, LongLat in LocationData.items() %}
           <tr>
             <td>{{ LongLat[0] }}</td>
             <td>{{ Postcode }}</td>
             <td>{{ LongLat[1] }}</td>
             <td>{{ LongLat[2] }}</td>
           </tr>
          {% endfor %}
        </table>
      </div>

CSS-

   <style media="screen">
      html, body, table {
      height: 100%;
      }
      .tableDiv {
      height: 50%;
      }
      table thead {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 999;
      background-color: white;
      color: black;
      }
      #storeform {
      margin-left: 700px;
      margin-top: 50px;
      margin-bottom: 50px;
      }
      #StoreData {
      margin: 10px auto;
      padding: 10;
      width: 1250px;
      overflow-y: scroll;
      }
   </style>

任何帮助将不胜感激。

Answer 1

固定版式

表格本质上符合其内容。 <td>中的任何内容都会影响<td>s的宽度和高度，进而影响<tr>，然后影响<tbody>，最后影响<table>。此默认行为由table-layout:auto设置，仅适用于<table>或具有display: table或display: inline-table的容器元素。 table-layout的唯一其他值为fixed。 “固定” 表通过遵守为任何<th>赋予的任何指定宽度（如果没有<th>则{{1} }，位于顶部<td>中。由于使用了BootStrap，因此我们可以将tr>类分配给.table-fixed，等效于<table> table-layout：fixed}`。

现在要控制table {中的内容，请在每个<td>中放置一个<div>或任何类似的块级元素。如果您希望每行有<td>或min-width，只需将其应用于width之一即可。请注意，添加了额外的行，每个行实际上都有内容：<div>或不间断空格，以防止空单元格崩溃-一种替代方法是为每个# 分配一个<div>。

包含表的min-height具有BS类<div>，且高度为.table-responsive的50％（默认情况下也是100％）。这种布局便于从外部控制桌子。

现在，我们可以控制桌子的宽度，也可以间接控制桌子的高度。添加内容并明确设置列宽后，内容将换行到下一行，而不是拉伸单元格。反过来，当单元格获得每行时，行等也一样。

由于实际布局可能会或可能不会出现许多未知因素，因此并非所有内容都是100％，因此在评论时请不要说“它不起作用” 。首先确定我们遗漏的所有详细信息，然后观察什么不起作用以及应该如何工作/出现。

演示

<body>

html,
body {
  height: 100%;
}

.table-responsive {
  height: 50%;
}

table {
  height: 100%;
}

无法更改工作台高度

1 个答案:

固定版式

演示