如何纠正意外的“表溢出”？

我目前正在编写一个辅助页面，但我有视觉障碍。我被告知，此页面上的表：如何纠正意外的“表溢出”？

http://www.accessibilityagent.com/legal/

在相邻的内容重叠。以下是正在使用的CSS代码。可能有人请帮助调整这个代码在上面的链接不重叠的页面：

<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>

来源

2016-06-07 Mario Bonds

你好马里奥，这个问题实际上已经无关工艺。因此，我们将把它迁移到Stack Overflow。 –

尝试设置这个CSS的表：

table-layout: fixed; 
width: 100%; 
word-wrap: break-word;

来源

2016-06-07 17:22:09

你需要适应table，所以设置table-layout:fixed，现在你需要让它适合尽可能大，所以改变width到100%在table，那么你需要适合单元格中的链接，所以打破单词，使用word-wrap:break-word.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><a href="http://www.ada.gov/yakima_co_pca/yakima_sa.html">http://www.ada.gov/yakima…</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2016-06-07 17:33:56 dippas

如何纠正意外的“表溢出”？

回答

相关问题