CSS:在 <td> 内居中 textarea对于 100% 表 [英] CSS: center textarea inside <td> for 100% table
问题描述
目前
我有一个 100% 宽度的表格，其中包含 2 列，其中有一个文本区域，用户可以在其中输入文本.
table {边框折叠:折叠；宽度:100%；边框:1px纯黑色；表格布局:固定；}，TD{文本对齐:居中；边框:1px纯黑色；填充:10px；}.容器 {}.text-area {宽度:100%；}<tr>第 1 列第 1 列第 2 列第 2 列</tr><tr><td><div class="容器"><textarea class="text-area">这是一小段文字.</textarea></td><td><div class="容器"><textarea class="text-area">这是一段很长的文字，最终应该显示为最小宽度为250 px</textarea>
</td></tr></tbody></table>
https://jsfiddle.net/qvr2b8pu/3/
问题
我希望文本区域动态调整到屏幕宽度，并保持周围单元格的边距不变，例如10px <-- 按照这个例子.
目标:
如果可以达到预期的结果，我希望保持表格和 div 的结构相同.
解决方案 只需将 display:flex 用于您的 container，然后将边距用于 textarea.希望此解决方案对您有所帮助.
table {边框折叠:折叠；宽度:100%；边框:1px纯黑色；表格布局:固定；}，TD{文本对齐:居中；边框:1px纯黑色；填充:5px；}.容器 {显示:弹性；}.text-area {宽度:100%；边距:5px；}
<tr>第 1 列第 1 列第 2 列第 2 列</tr><tr><td><div class="容器"><textarea class="text-area">这是一小段文字.</textarea></td><td><div class="容器"><textarea class="text-area">这是一段很长的文字，最终应该显示为最小宽度为250 px</textarea>
</td></tr></tbody></table>
Currently
I have a 100% width table that contains 2 columns within which there is a textarea where users can input text.
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/
Problem
I want the text area to dynamically adjust to the screen width, and keep margins to the surrounding cell constant e.g. 10px <-- as per this example.
Goal:
I would like to keep the structure of the table and divs the same if this is possible to achieve the desired result.
解决方案 Simply use display:flex for your container and then use the margin for textarea. I hope this solution will be helpful for you.
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>
这篇关于CSS:在 <td> 内居中 textarea对于 100% 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆