CODEWITHSUNDEEP
htmlcssmobile
Serhii
Serhii

Reputation: 51

Unwanted border around td on mobile browser type

I have this html code as example to show my issue.

table {
  border-collapse: collapse;
  border: 0px;
  border-spacing: 0;
  background-color: black;
  width: 300px;
  height: 300px;
  margin: auto;
}
td {
  border: none;
  background-color: white;
  padding: 0px
}
<table border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>White</td>
    <td>White</td>
  </tr>
</table>

As you can see parent element has black background, child element has white, and I can not remove this lines around td in curent example.Same thing with Floted div.

This only on mobile browsers, or chrome mobile developer view. Please help)

https://i.sstatic.net/bppBb.png

To see borders on chrome You have to refresh page after switching to mobile view If it work on your pc why it would not work on my?
This is full example code.What I am doing wrong?

I am on Windows 10. But any way my HTC shows the same...

<!DOCTYPE html>
<html>
<body>



<table border='0' cellspacing='0' cellpadding='0' style="border-collapse:collapse;border:0px;border-spacing:0;background-color:black;width:300px;height:300px;margin:auto">
  <tr>
      <td style="border:none;background-color:white;padding:0px">White</td>
      <td style="border:none;background-color:white;padding:0px">White</td>
  </tr>
</table>


</body>

</html>

Even on CssZengarden site this borders is visible on mobile

https://i.sstatic.net/kVZgR.png

Upvotes: 3

Views: 4024

Answers (3)

Patrick Diebold
Patrick Diebold

Reputation: 81

Run into the same problem and found a solution.

I was working with 12% black 1px borders and this solved it:

>td[colspan] { border-top: 1px solid rgba(0,0,0,.06) !important; }

Mysteriously using the half visibility made the double-border matching. Using just border-color or border-top-color + val as well does not solve this.

Upvotes: 0

Persijn
Persijn

Reputation: 14990

I could recrete the issue and i recommend using the css3 display table instead of using actual tables.

.table-wrapper {
  display: table;
  width: 300px;
  height: 300px;
  background-color: black;
}
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: white;
}
<div class="table-wrapper">
  <div class="cell">TEXT HERE</div>
  <div class="cell">TEXT HERE</div>
</div>

Upvotes: 1

connexo
connexo

Reputation: 56754

Try setting border: 0 none !important; for table, tr, th, and td. I am suggesting the !important only to make sure your borders don't come from any CSS by third parties which you might have included.

If that fails, you can still try to apply border-color: transparent; or border-color: #your-background-color;, or border-color: rgba(255,255,255,0); as a workaround.

As a last resort, you can also try setting

border-style: hidden;

Upvotes: 0

Related Questions