html - 如何固定表格宽度

Question

enter image description here假设我有一个包含两列的表

<table>

<tr><td>Email</td> <td></td></tr>
<tr><td>Full name</td> <td></td></tr>

</table>

我想将表格宽度固定为最大尺寸，这样无论我在第二列中写什么，表格都不会扩展超过固定尺寸。相反，它会自动扩展其高度，以将大文本保留在第二列中写入的区域中。如何做到这一点？

当我写大的时候，它看起来像上传的图片。但我希望它垂直扩展，而不是水平扩展。

Answer 1

试试这个代码

table {
  width: 100%;
  max-width:200px;
  table-layout: fixed;
  border-collapse: collapse;
      }

table {
    table-layout: fixed;
    width:100%;
    max-width:200px;
    border-collapse: collapse;
}
.wrapper{
   max-width:200px;
}
table td.last {
    width: 150px;
    word-break: break-all;
    }
table td{
   border: 1px solid #CCCCCC;
    }  
    
    table td, table th {
    border: 1px solid #CCCCCC;
    text-align: center;
    font-family: open sans;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

<div class="wrapper">
<table>
<tbody>
<tr><td>Email</td> <td class="last">sdfdsffdsfsdfsdf</td></tr>
<tr><td>Full name</td> <td class="last">sdffdsfsdfssssssssssssssssssss</td></tr>
</tbody>
</table>
   </div>