目前
我有一个 100% 宽度的表格,其中包含 2 列,其中有一个文本区域,用户可以在其中输入文本。
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
th,
td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {}
.text-area {
width: 100%;
}
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container">
<textarea class="text-area">This is a short piece of text.
</textarea>
</div>
</td>
<td>
<div class="container">
<textarea class="text-area">This is a long piece of text, which ultimately should be displayed as a minimum with a width of 250 px
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/qvr2b8pu/3/
问题
我希望文本区域动态调整以适应屏幕宽度,并保持周围单元格的边距不变,例如10px <-- 按照这个例子。
目标:
如果可以达到预期的结果,我希望保持表格和 div 的结构相同。
最佳答案
只需将 display:flex
用于您的 container
,然后将边距用于 textarea
。我希望这个解决方案对您有所帮助。
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
th,
td {
text-align: center;
border: 1px solid black;
padding: 5px;
}
.container {
display: flex;
}
.text-area {
width: 100%;
margin: 5px;
}
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container">
<textarea class="text-area">This is a short piece of text.
</textarea>
</div>
</td>
<td>
<div class="container">
<textarea class="text-area">This is a long piece of text, which ultimately should be displayed as a minimum with a width of 250 px
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
关于html - CSS: center textarea inside <td> for 100% table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55788224/