如何糾正意外的「表溢出」？

我目前正在編寫一個輔助頁面，但我有視覺障礙。我被告知，此頁面上的表：如何糾正意外的「表溢出」？

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

如何糾正意外的「表溢出」？

回答

相關問題