桌面底部边框显示在Firefox中，但不显示在Chrome中
[英]table bottom border shown in Firefox but not in Chrome
问题描述
我有以下html和CSS，其目的是将显示的宽列放在桌面查看器上，作为任何小屏幕设备的下面一行。 那很有用。 但是，当我使用Firefox（在桌面浏览器上）查看它时，我在表格的底部有一个边框，但是当我用Chrome查看它时，我没有。
请注意边框底部：0px; 是必要的，以便在小型设备上显示的两行代替大屏幕上的单行，它们之间不应有水平线。
作为问题的一个更简单的版本，我已经完全删除了td的所有border属性，并且只依赖于tbody边框，但它仍然不起作用。 很明显它不是边界底部：0px; 导致Chrome省略底线的属性。
.big-small-table { border-collapse: collapse; } .big-small-table th { border: thin solid; padding: 3px 10px; } .big-small-table td { /*border: thin solid;*/ /*border-bottom:0px;*/ /*border-top:0px;*/ padding: 3px 10px; } .big-small-table tbody { border: thin solid; } .desc-big-screen { display:table-cell; } .desc-small-screen { display:none; } @media only screen and (max-device-width: 400px) { .desc-big-screen { display:none; } .desc-small-screen { display:table-cell; } }
<body> <table class="big-small-table"> <tr> <th>Type</th> <th class="desc-big-screen">Description</th> <th>Data</th> </tr> <tbody> <tr> <td>Small</td> <td class="desc-big-screen">This is the description of something small.</td> <td>1</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr> </tbody> <tbody> <tr> <td>Medium</td> <td class="desc-big-screen">This is the description of something medium.</td> <td>5</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr> </tbody> <tbody> <tr> <td>Large</td> <td class="desc-big-screen">This is the description of something large.</td> <td>50</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr> </tbody> </table> </body>
有谁知道如何让我的桌子底部的边框出现在Chrome中？
1 个解决方案
解决方案1
0 2016-11-07 08:11:41
最后，我通过在大屏幕模式下明确地将每个td的所有td的边框放在每个tbody的第一行中并在小屏幕模式下明确地将相同边框设置为零来解决它。 它很难看，但至少我现在有一个解决方案，Chrome忽略了桌子底部的tbody边框！
.big-small-table { border-collapse: collapse; } .big-small-table th { border: thin solid; padding: 3px 10px; } .big-small-table td { border-left: thin solid; border-right: thin solid; padding: 3px 10px; } .big-small-table tbody { border: thin solid; } .big-small-table tbody tr:first-child td { border-bottom: thin solid; } .desc-big-screen { display:table-cell; } .desc-small-screen { display:none; } @media only screen and (max-device-width: 400px) { .big-small-table tbody tr:first-child td { border-bottom: 0px; } .desc-big-screen { display:none; } .desc-small-screen { display:table-cell; } }
<body> <table class="big-small-table"> <tr> <th>Type</th> <th class="desc-big-screen">Description</th> <th>Data</th> </tr> <tbody> <tr> <td>Small</td> <td class="desc-big-screen">This is the description of something small.</td> <td>1</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr> </tbody> <tbody> <tr> <td>Medium</td> <td class="desc-big-screen">This is the description of something medium.</td> <td>5</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr> </tbody> <tbody> <tr> <td>Large</td> <td class="desc-big-screen">This is the description of something large.</td> <td>50</td> </tr> <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr> </tbody> </table> </body>
在Chrome和Firefox中，底线执行者并不突出。 在IE中工作
[英]Border-bottom doers not come as underline in Chrome and Firefox; works in IE
HTML 表格边框格式适用于 Firefox 但不适用于 Safari 和 Chrome
[英]HTML table border formatting works in Firefox but not in Safari and Chrome
表格单元格和边框在 IE/Chrome 和 Firefox/Opera 中显示不同
[英]Table cell and border displaying differently in IE/Chrome and Firefox/Opera
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.