为什么html表将多列数据合并为一列

Question

我想要一个带有scrollbar的html表，我举了一个可滚动表的示例，但是问题是所有列数据都适合一列，如此处所示。

http://jsfiddle.net/bqtzykuj/4/

在此示例中，css是

<tbody style="height: 350px; max-height: 400px;overflow-y: scroll;display:block;">

但是，如果我删除display:block，前面描述的问题就消失了，但是可滚动条也消失了。 http://jsfiddle.net/bqtzykuj/5/

Answer 1

您还需要将server { server_name www.mysite.io; # managed by Certbot location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_pass http://localhost:3000/; proxy_ssl_session_reuse off; proxy_set_header Host $http_host; proxy_cache_bypass $http_upgrade; proxy_redirect off; } listen [::]:443 ssl ipv6only=on; # managed by Certbot listen 443 ssl; # managed by Certbot # change the above line to "listen 443 ssl http2" if you want http2 ssl_certificate /etc/letsencrypt/live/mysite.io/fullchain.pem; # managed $ ssl_certificate_key /etc/letsencrypt/live/mysite.io/privkey.pem; # manage$ include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot } server { if ($host = www.mysite.io) { return 301 https://$host$request_uri; } # managed by Certbot listen 80; listen [::]:80 ; server_name www.mysite.io; return 404; # managed by Certbot } 添加到display: block;。它会起作用。

在这里检查： http://jsfiddle.net/3x27f6by/

此处的工作片段：

thead

table {
  border: 1px solid black;
}

thead {
  display: block;
}

th,
td {
  text-align: center;
  width: 100px;
  box-sizing: border-box;
}

在<table class="table table-hover"> <thead class="text-warning"> <th>price</th> <th>amount</th> <th>total</th> </thead> <tbody style="height: 350px; max-height: 400px;overflow-y:auto; display:block;"> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> <tr _ngcontent-c14="" class="ng-star-inserted"> <td _ngcontent-c14="" style="color:red;">0.002078 </td> <td _ngcontent-c14="">12354.572620 </td> <td _ngcontent-c14="">25.677144 </td> </tr> </tbody> </table>和th中添加了以下样式，以使其看起来更好：

td

Answer 2

使用display: block;代替display: table-row-group;

为了使元素以表格形式起作用/显示：

• 表格单元格<td>要求父级为display: table;或display: table-cell;
• 这也适用于表行<tr>，其要求父级为display:table;或display:table-row-group;

在您的情况下，您要将<tr>的父节点更改为display:block;，这意味着子<tr>节点将无法以正确的表格格式呈现，因为父节点不是{{ 1}}或display: table;