td的边界没有显示在word-wrap休息词

Question

我有一张结构合适的桌子。我添加了固定的样式表布局和带有自动换行符的td。问题是边界不合适。请查看图片

表格样式是

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #ffffff;
  white-space: normal;
  table-layout: fixed;
}

td {
  float: left;
  word-wrap: break-word;
  white-space: normal;
}

完整的HTML

Answer 1

以下解决方案将为您提供帮助

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background-color: #ffffff;
  white-space: normal;
  table-layout: fixed;
}
th{
  border: 1px solid black;

}
td {
  border: 1px solid black;
  word-wrap: break-word;
  white-space: normal;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders Maria Anders Maria Anders Maria Anders Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>