How to correct an accidental "table overflow"? - html

Question

I am currently coding an accessibility page, but I am visually impaired. I've been advised that the table on this page:
http://www.accessibilityagent.com/legal/
is overlapping the adjacent content. Below is the CSS code being used. Could someone please help adjust this code to not overlap the page in the link above:
<div>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
table.center {
margin-left:auto;
margin-right:auto;
}
body {
text-align:center;
}
table {
width: 50%;
}
table, th, td {
border: 20px solid black;
margin: auto;
padding: 5px;
}
td.wrappable,
table.data_table td.wrappable {
white-space: normal;
}
</style>

Answer 1

Try setting this CSS for the table:
table-layout: fixed;
width: 100%;
word-wrap: break-word;

Answer 2

you need to fit the table, so set table-layout:fixed , now you need to have it fit as large as possible so change width to 100% in table, then you need to fit the links in the cell, so break the words, using word-wrap:break-word in .center a
body {
background-color: #d8da3d;
color: purple;
}
table.center {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 100%;
}
table,
th,
td {
border: 20px solid black;
padding: 5px;
}
.center a {
display: block;
word-wrap: break-word;
}
<table class="center">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Plaintiff</th>
<th scope="col">Defendant</th>
<th scope="col">Link to More Info</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">2015</td>
<td>US DOJ</td>
<td>YAKIMA COUNTY</td>
<td>http://www.ada.gov/yakima…
</td>
</tr>
</tbody>
</table>