td 与其边框元素之间的奇怪空间：CSS 表

Question

I am trying to create a CSS table with border all over using the standard method of applying top and left borders to all td elements (apart from those in first column and first row). And then there is a border on the <table> . This method suits my use-case better than one in which we use border-collapse .

But then there is a bug which resembles inner margin on td elements. This margin like space isn't always there but only occurs on some viewports for some reason. Here's my code:

 *{ padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } .table-container { display: flex; flex-direction: column; align-items: center; padding-bottom: 50px; font-size: 20px; } table { font-size: 15px; border-spacing: 0; border: 4px solid black; border-radius: 35px 35px 0 0; border-left: none; border-top: none; width: 90vw; background-color: white; margin-top: 50px; text-align: center; } td { box-sizing: content-box; border-left: 4px solid black; border-top: 4px solid black; height: 60px; } thead td:first-child { border-top-left-radius: 35px; } thead td:last-child { border-top-right-radius: 33px; } thead td { font-size: 20px; font-weight: 500; } table button { cursor: pointer; height: 100%; border: 0; background-color: white; color: #d90429; } .progress-bar{ background-color: orange; } .progress-bar > div{ background-color: green; height: 100%; width: 50% }

 <div class="table-container"> <table> <thead> <tr> <td>Task Type</td> <td>Target Time (in Minutes)</td> <td>Percentage Achieved</td> <td>Add/Delete Tasks</td> </tr> </thead> <tbody> <tr> <td>Maths</td> <td>120</td> <td class="progress-bar"> <div>50</div> </td> <td> <button type="button"> Delete </button> </td> </tr> </tbody> </table> </div>

Here's one viewport in which this bug can be seen in action:

I guess running above code snippet and looking at the output in full screen will reproduce this bug

EDIT

1. As pointed out by KIKOSoftware in comments, the problem seems to be specific to chrome.
2. My Version of Chrome happens to use 3.991px for border instead of 4px.

Answer 1

on a personal level, having had a thousand problems with borders in HTML tables, I ended up opting for a radical solution: no border at all!
I use border-collapse: separate; and I play on border-spacing
in addition it lightens the css to write

I recommend it

in your case:

 * { padding : 0; margin : 0; } html, body { height : 100%; width : 100%; background-color: #658d8d; /* this one is mine... */ } .table-container { display : flex; flex-direction : column; align-items : center; padding-bottom : 50px; font-size : 20px; margin: 1em; } table { font-size : 15px; border-collapse : separate; border-spacing : 4px; background-color : black; border-radius : 33px 33px 0 0; width : 90vw; } thead td { font-size : 20px; font-weight : 500; } td { background-color : white; height : 60px; text-align : center; } thead td:first-child { border-top-left-radius: 29px; } thead td:last-child { border-top-right-radius: 29px; } table button { cursor : pointer; height : 100%; width : 100%; border : 0; background-color : white; color : #d90429; } .progress-bar { background-color: orange; } .progress-bar > div { background-color : green; height : 100%; width : 50% }

 <div class="table-container"> <table> <thead> <tr> <td>Task Type</td> <td>Target Time (in Minutes)</td> <td>Percentage Achieved</td> <td>Add/Delete Tasks</td> </tr> </thead> <tbody> <tr> <td>Maths</td> <td>120</td> <td class="progress-bar"><div>50</div></td> <td><button type="button">Delete</button> </td> </tr> </tbody> </table> </div>