我希望我的表格宽度为100%,并且表格的每一列只占用它所需的空间.如果它溢出,则会出现省略号.
没有表格布局:固定;
html,body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: auto; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; overflow: hidden; text-overflow: ellipsis; white-space: Nowrap; cursor: pointer; }
<div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>This is the name of a product that is long</td> </tr> <tr> <td>549490309</td> <td>This is a product title that is even longer than the first one and longer than the second one because the second one is short,so of course it's longer.</td> </tr> <tr> <td>005948333</td> <td>This one is short</td> </tr> </tbody> </table> </div>
这就是我想要列的外观,但是如果没有table-layout:fixed;,由于white-space:Nowrap,表溢出而不是调整大小.
使用表格布局:固定;
html,body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: fixed; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; overflow: hidden; text-overflow: ellipsis; white-space: Nowrap; cursor: pointer; }
<div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>This is the name of a product that is long</td> </tr> <tr> <td>549490309</td> <td>This is a product title that is even longer than the first one and longer than the second one because the second one is short,so of course it's longer.</td> </tr> <tr> <td>005948333</td> <td>This one is short</td> </tr> </tbody> </table> </div>
这个响应很好,并且有省略号,但我的列不再占用最小的空间.
我怎样才能使列只占用他们需要的空间,同时让我的表响应得很好?
如果你想玩它:JSFiddle
解决方法
您可以
>使用自动布局以考虑内容
>将表格的宽度设置为100%.它将被视为最小宽度.
>将第二列的宽度设置为100%.然后它会占用所有可用空间,如果有的话.
>为防止第二列由于内容物而增长,请将它们包裹在绝对定位的容器中.
html,body { margin: 0; padding: 0; font-family: sans-serif; */ } .account-products-container .table { width: 100%; max-width: 100%; margin: 20px 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: auto; } .account-products-container .table-striped>tbody>tr:nth-of-type(odd) { background-color: #eee; } .account-products-container .table>thead>tr>th { padding: 8px; line-height: 1.428571429; font-weight: 600; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid #DDD; text-align: left; } .account-products-container .table>tbody>tr>td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #DDD; cursor: pointer; white-space: Nowrap; } td:nth-child(2) { width: 100%; position: relative; } td:nth-child(2):not(:empty)::after { /* Prevent row from collapsing vertically if the first column is empty */ content: ''; display: inline-block; } td:nth-child(2) > span { position: absolute; left: 0; right: 0; overflow: hidden; text-overflow: ellipsis; }
<div class="account-products-container"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Product</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td><span>This is the name of a product that is long</span></td> </tr> <tr> <td>549490309</td> <td><span>This is a product title that is even longer than the first one and longer than the second one because the second one is short,so of course it's longer.</span></td> </tr> <tr> <td>005948333</td> <td><span>This one is short</span></td> </tr> </tbody> </table> </div>
原文地址:https://www.jb51.cc/html/226774.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。