CSS 填充溢出 HTML 表，即使有边框大小但没有溢出其他任何东西

Question

I've been reading non-stop about sizing and I still cannot seem to apply it to my code. I figured out that padding was causing my HTML table to overflow, but that it can be stopped with box-sizing: border-box;

So I added border-box to the elements I thought needed it, then to everything, trying to change width settings, but to no avail. When I remove border-box my header and navbar are affected, but the html table overflows the screen no matter what.

All my elements seem to fit on the screen perfectly fine, except the table. I assume that it is something I added that it countering the box sizing, but I commented out lines one by one and didn't find anything.

I put the full code into fiddle: https://jsfiddle.net/atpzw32L/

The CSS in question:

html, body, h1 {
    margin: 0;
    padding: 0;

}

html, body { min-height: 100%; }

  
body{
    background-image: url("agaricus.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-size: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    width: 100%;

}


  /* Style the header */
  .header {
    padding: 10px;
    text-align: center;
    background: #832bfd7c;
    color: white;
  }
  
  /* Increase the font size of the h1 element */
  .header h1 {
    font-size: 40px;
  }
  
  /* Style the top navigation bar */
  .navbar {
    overflow: hidden;
    background-color: #333;

    margin-bottom: 20px;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }







/* CSS to hide key columns */
th:nth-child(4), th:nth-child(5), th:nth-child(6), th:nth-child(8), th:nth-child(11), th:nth-child(12), th:nth-child(13), th:nth-child(15) {
    display: none
}
td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(8), td:nth-child(11), td:nth-child(12), td:nth-child(13), td:nth-child(15) {
    display: none
}


/* CSS for checkboxes*/

.dropdown-check-list {
    display: inline-block;
    position: relative;
    font-family: Verdana, sans-serif;
    padding: 5px;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);


}

.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;

    min-width: 100px;
}

.dropdown-check-list .anchor:after {
    position: absolute; 
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}

.dropdown-check-list ul.items {
    padding: 5px;
    display: none;
    margin: none;
    border: 1px solid #ccc;
    border-top: none;

    position: absolute;
    background-color: #f1f1f1;
}

.dropdown-check-list ul.items li {
    list-style: none;
    padding: 5px;
}

.dropdown-check-list.visible .anchor {
    color: #0094ff;
}

.dropdown-check-list.visible .items {
    display: block;
}

input {
    float: right;
    height: 18px;
    width: 18px;
}



/* CSS for table */


table, th, td {
    border: 2px solid;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    margin-top: 30px;
    font-family: Verdana, sans-serif;
    padding: 15px;
    background-color: rgb(255, 255, 255);
}

th{
    text-align: center;
    height: 80px;
    vertical-align: bottom;
    padding: 2px;
    border-bottom: 4px solid rgb(0, 0, 0);
    font-size: 16px;
    background-color: rgba(4, 100, 156, 0.278);
}

td {
    text-align: center;
    height: 100px;
    width: 90%;
    padding: 15px;

}

/* th{
    text-align: center;
    height: 100px;
    vertical-align: bottom;
    padding: 15px;
    border-bottom: 4px solid rgb(0, 0, 0);
    font-size: 16px;
    background-color: rgba(4, 100, 156, 0.278);

} */
/* 
td{
    text-align: center;
    height: 100px;
    vertical-align: left;
    padding: 15px;
    font-size: 15px;
}  */


tr:hover {background-color: rgba(4, 100, 156, 0.089);}

I aim for my end result to have all columns visible, and the table fitting within the screen, so when I add padding to the table it will fit within the screen. I would also like to keep the padding within th and td.

Please let me know how to go about this, I am out of ideas. Thank you

Answer 1

Concerning the width and the horizontal overflow of your table, this is simply caused by its contents: The cells (for example the header cells) contain (single) words that stretch the width of those cells (and therefore the columns) to fit into them, and so the overall width of the table becomes as wide as it is. Examples are the words "description", "information" and "identification" in the header cells.

Words won't be divided automatically, so those wordlenghts determine your minimum widths, expanding the column width and therefore the overall width of the table.

There are three methods to change that:

1.) (IMO the best) Use a smaller font size for the text. That way those longer words and with them the cells and columns won't be that wide and (maybe) fit into the screen.

2.) (also okay) Use hyphenation : Apply hyphens: auto; to td and th . The automatic hyphenation will divide words at know possible hyphenation positions.

3.) (IMO a bad solution) Apply word-break: break-word; to the cells. This will divide longer words, but at "incorrect" positions, ie simply at the end of the given cell width. As I wrote, not good, only to be used if nothing else works.

I would combine methods #1 and #2 .