Question

我目前正在编写辅助功能页面，但我视力不佳。我已被告知此页面上的表格：

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>

Answer 1

尝试为表格设置此CSS：

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

Answer 2

你需要适合table，所以设置table-layout:fixed，现在你需要让它尽可能大，所以在{{1}中将width更改为100%然后你需要在单元格中填入链接，所以使用table中的word-wrap:break-word

来中断单词

＆＃13;

.center a

＆＃13;

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

＆＃13;

如何纠正意外的表溢出＆＃34;？

2 个答案: