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-container {
max-width:800px;
width:100%;
}
.table-container table {
width:100%
}

<div class="table-container">
<table>

<tr><td>Email</td> <td></td></tr>
<tr><td>Full name</td> <td></td></tr>

</table>
</div>

Answer 2

试用此代码

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

<table>
    <tr><td>Email</td> <td style="max-width: maxSize"></td></tr>
    <tr><td>Full name</td > < td style="max-width: maxSize"></td></tr>        
</table>

Answer 4

请在您的td标记中使用style="word-wrap: break-word"

或者你可以参考这个社区问题。

Word-wrap in an HTML table

示例：在第二列中输入您的值。

<!DOCTYPE html>
<html>
 <head> </head>
<body>
  <table style="table-layout: fixed; width: 100%" style="word-wrap: break-word">
  

 <tr><td>Email</td> <td style="word-wrap: break-word">Hello Column1 Hello Column1 Hello Column1 Hello Column1 Hello Column1 Hello Column1</td></tr>
 <tr><td>Full name</td> <td style="word-wrap: break-word">Hello Column</td></tr>

</table>
</table>

</body>
</html>

Answer 5

<table >
  <thead class="">
    <tr>
      <th width="60%"></th>
      <th width="20%"></th>
      <th width="20%"></th>
    </tr>
    <tr>
      <th class="numeric">Name</th>
      <th class="numeric">Code</th>
      <th class="numeric">Fee</th>
    </tr>
  </thead>
</table>

如何修复表格宽度

5 个答案: