Creating bar charts

HTML & CSS
52

That seems to be a bug in Firefox with a mis-alignment in its border collapse routine. It looks like it can be fixed by removing the border-collapse and set border-spacing to zero instead.

e.g.

  /*border-collapse: collapse;*/
  border-spacing:0;/* firefox bug with border mis-alignment*/

.chart {
  width: 100%;
  table-layout: fixed;
  /*border-collapse: collapse;*/
  border-spacing:0;/* firefox bug with border mis-alignment*/
  max-width: 1240px;
  margin: auto;
  background: #f9f9f9;
}

Historically Firefox’s borders on tables were slightly misaligned in edge cases so I guess they still haven’t fixed it completely.

The three tables all use the same css apart from the one custom variable I changed. The html was changed to show different numbers of items and rows but the CSS was using a custom property (css variable) in order to make it ease to change the axis labels. Custom properties are only available in modern browsers but make life easier for things like this.

e.g.

:root {
  --gridlines: 10; /* the number of gridlines you want */
  /* we will modify this with a class for other tables */
}


/* redefine the gridlines for the other tables using an extra class on the table */
/* bi monthly chart */
.bimonthly {
  --gridlines: 5; /* the number of gridlines you want */
}
/* regional graph*/
.regional {
  --gridlines: 4; /* the number of gridlines you want */
}
1 Like