CODEWITHSUNDEEP
cssfirefoxhtml-tablewidth
Mazen
Mazen

Reputation: 219

Table looks weird in Firefox, but looks fine on Safari/Chrome

I'm trying to create a table with a certain layout. The desired output is this (Chrome/Safari):

good result

However Firefox gives me this:

bad result

Here is the code for the example:

table {
  border-collapse: collapse;
  margin: 0 auto;
}
div {
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  background-color: white;
}
td {
  background-color: white;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center;
}
body {
  background-color: black;
}
<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <th colspan="5">
        <div></div>
      </th>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
  </table>
</body>

</html>

The only thing I noticed is that the tr width in Firefox is 326px while in other browsers it is 310px. I tried explicitly setting the width to 310px but that didn't fix it.

Upvotes: 0

Views: 255

Answers (1)

Dhiraj
Dhiraj

Reputation: 1871

Remove display: inline-block from td and add margin-bottom: -1px to div. SEE THE DEMO ON FIREFOX.

CSS

table {
  border-collapse: collapse;
  margin: 0 auto;
}
div {
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  background-color: white;
  margin-bottom: -1px;
}
td {
  background-color: white;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center;
}
body {
  background-color: black;
}

Upvotes: 1

Related Questions