Question

我有一个圆形框，我在其中显示信息，并希望显示具有不同背景颜色的备用线。问题是颜色不会流到边界和细胞之间，它看起来不太好。此外，当有许多行并且滚动条隐藏圆角时会出现一个滚动条（如果它变得太复杂，我可能会使用它。）

这是我的基本html：

 <div style="width:80%">
    <div id="Activity" style="width:100%; display:inline-block; border-radius:20px; border:1px solid black; padding:10px; background-color:black; height:500px; overflow-y:auto; overflow-x:hidden;">
         <table class="list" id="ActivityList" style="width:100%;">
             <thead style="color:white; font-weight:bold;">
                 <tr>
                     <td style="padding-right:10px;">Date/Time</td>
                     <td>Log</td>
                 </tr>
             </thead>
             <tbody>
                <tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
                <tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
                <tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:02</td><td>Variable Paul is at home updated to False</td></tr>
             </tbody>
         </table>
     </div>
 </div>

这是显示问题的jsfiddle。

Answer 1

添加cellspacing="0"以移除单元格之间的空间

对于滚动条，从子div中删除溢出并将其设置为父div，反之亦然，您可以将这两种解决方案完全链接起来：

Solution 1

Solution 2

对于触摸右/左边框的线条，您所要做的就是删除div的右/左边距

Solution 3

如何使我的圆形框交替线颜色流向边框

1 个答案: