Get Rid Of Blank Space due to box-sizing property of parent element

Question

I am creating a table and I have used box-sizing: border-box; property for its parent element body. I'm getting a vertical red line on the right in Chrome for some screen resolutions (try to zoom in and out to see it). I want to get rid of this red line.

When I remove the box-sizing: border-box; property from the body it works fine. But it changes the appearance of other elements. Is there a way to get rid of it.

UPDATE: I want to create a table with the following requirements: 1. Responsive design i.e. horizontal scroll instead of line wrap or overflow. 2. Width 100%. 3. Box-shadow. 4. And it does not distort other element.

Here, is my code:

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  overflow-x: auto;
}

tbody {
  background-color: blue;
  display: table;
  width: 100%;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>

actually, I don't see any red line in the snippet result. What browser do you use? — YakovL, May 06 '20 at 06:36
I am using chrome. And, the red line does not appear for narrow screen. Try it on a wide screen. — Mansoor Ahmed Memon, May 06 '20 at 06:52
ok, now I can see the vertical red line if I zoom in and out. I've voted to reopen the question — YakovL, May 06 '20 at 10:44

score 1 · Accepted Answer · answered May 10 '20 at 17:33

This is an interesting case. First of all, I'd say this is a quirk due to semantically wrong usage of styles: these bits

table {
  display: block;
}
tbody {
  display: table;
}

make no sense, why would you use that?

I've tweaked this a bit and created an MCVE:

table {
  display: block;
  background-color: red;
}

tbody {
  display: table;
  width: 100%;
  background-color: #ccffff;
}

<table>
  <tr>
    <td>test</td>
  </tr>
</table>

On zooming in and out in Chrome one may see the vertical red line on the right.

As we can see, the width of an element with display: table; width: 100%; is not accurately calculated by the browser when it is inside an element with display: block. To illustrate that this is the root of the problem, consider 2 more snippets:

.table {
  background-color: red;
  display: block;
}

.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}

<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td">test</div>
    </div>
  </div>
</div>

this is the structure of the "table" as you modified it. The cell doesn't actually play any role, this still reproduces the issue:

.table {
  background-color: red;
  display: block;
}
.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}

<div class="table">
  <div class="tbody">
    test
  </div>
</div>

I think this may be considered as a browser bug, but since this structure is semantically wrong, you can't call it a bug really since specs probably don't say anything about it.

Just remove those display rules and move width: 100% to the table, and here you go:

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow-x: auto;
  width: 100%;
}

tbody {
  background-color: blue;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>

I want a responsive table. The contents overflow for this snippet. I tried a div but again I get the same issue, that red line. — Mansoor Ahmed Memon, May 11 '20 at 09:22
@MansoorAhmedMemon well, I suggest you to update your question with a detailed explanation of what you are trying to achieve and with the code of your attempt to get that in a semantically correct way. How exactly the bottom snippet in my answer doesn't fit your needs? — YakovL, May 11 '20 at 09:30

Get Rid Of Blank Space due to box-sizing property of parent element

1 Answers1