Jump to content

Table overflowing outside the boundaries

Recommended Posts

I am working on this page of my website and the table content is overflowing on the right side. The only way I can get the content to stay on the page is if I add a spacer block to the right side, but then there is still a bar on the right side. Not sure how to resolve that. There doesn't look to be any formatting in the HTML for the table that would be causing this.

Any help is appreciated!

This is my CSS for the table and I have it setup to horizontally scroll/be responsive:

/* Points page table formatting */
.responsive-table {
  overflow-x: auto;
}

table.points {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table.points td, table.points th {
  padding: 7px 7px;
}
table.points tr:nth-child(even) {
  background: #D6D6D6;
}
table.points thead {
  background: #AC112A;
  border-bottom: 1px solid #AC112A;
}
table.points thead th {
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 2px solid #AC112A;
}

table.results thead th:first-child {
  border-left: none;
}

table.points td:nth-child(5) {
    border-right: 2px solid #AC112A;
  }

 

Edited by moojomoore
clarity
Link to comment
  • Replies 1
  • Views 543
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.