英文:
How to set an input in a table-header th, without increasing the column-widths?
问题
以下是翻译的HTML和CSS代码：
<table class="my-table">
<thead>
<tr>
<th>
<div>
ID
</div>
</th>
<th>
<div>
Name
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1245</td>
<td>Michael Knight</td>
</tr>
<tr>
<td>1247</td>
<td>Devon Miles</td>
</tr>
</tbody>
</table>
.my-table {
border: 1px solid;
border-spacing: 0;
table-layout: fixed;
border-collapse: separate;
box-sizing: border-box;
}
.my-table thead th {
border-bottom: 1px solid;
border-right: solid 1px;
}
.my-table tbody td {
border-top: none;
border-left: none;
border-bottom: 1px dotted;
border-right: 1px solid;
}
希望这有所帮助！
英文:
Here's some table html-code, where the header-widths fit to their contents:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-table {
border: 1px solid;
border-spacing: 0;
table-layout: fixed;
border-collapse: separate;
box-sizing: border-box;
}
.my-table thead th {
border-bottom: 1px solid ;
border-right: solid 1px;
}
.my-table tbody td {
border-top: none;
border-left: none;
border-bottom: 1px dotted;
border-right: 1px solid;
}
<!-- language: lang-html -->
<table class="my-table">
<thead>
<tr>
<th>
<div>
ID
</div>
</th>
<th>
<div>
Name
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1245</td>
<td>Michael Knight</td>
</tr>
<tr>
<td>1247</td>
<td>Devon Miles</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
Now I want to add text-inputs below the headers, but the input should not increase the header-widths. Does anyone know how to achieve this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-table {
border: 1px solid;
border-spacing: 0;
table-layout: fixed;
border-collapse: separate;
box-sizing: border-box;
}
.my-table thead th {
border-bottom: 1px solid ;
border-right: solid 1px;
}
.my-table tbody td {
border-top: none;
border-left: none;
border-bottom: 1px dotted;
border-right: 1px solid;
}
<!-- language: lang-html -->
<table class="my-table">
<thead>
<tr>
<th>
<div>
ID
</div>
<div>
<input type="text">
</div>
</th>
<th>
<div>
Name
</div>
<div>
<input type="text">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1245</td>
<td>Michael Knight</td>
</tr>
<tr>
<td>1247</td>
<td>Devon Miles</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
Thanks!
答案1
得分: 3
将width设置为0，然后将min-width设置为100%。width将其缩小到零尺寸，然后，由于min-width会覆盖width（参见MDN），它会扩展以适应内容。将box-sizing设置为border-box以容纳填充。
.my-table {
border: 1px solid;
border-spacing: 0;
table-layout: fixed;
border-collapse: separate;
box-sizing: border-box;
}
.my-table thead th {
border-bottom: 1px solid;
border-right: 1px solid;
}
.my-table tbody td {
border-top: none;
border-left: none;
border-bottom: 1px dotted;
border-right: 1px solid;
}
.my-table input[type="text"] {
width: 0;
min-width: 100%;
box-sizing: border-box;
}
<table class="my-table">
<thead>
<tr>
<th>
<div>
ID
</div>
<div>
<input type="text">
</div>
</th>
<th>
<div>
Name
</div>
<div>
<input type="text">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1245</td>
<td>Michael Knight</td>
</tr>
<tr>
<td>1247</td>
<td>Devon Miles</td>
</tr>
</tbody>
</table>
英文:
Set the width to 0 then min-width to 100%. Width will shrink it down to no size then, as min-width overrides width (see MDN) it then expands to fit the content. Set box-sizing to border box to accomodate the padding.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-table {
border: 1px solid;
border-spacing: 0;
table-layout: fixed;
border-collapse: separate;
box-sizing: border-box;
}
.my-table thead th {
border-bottom: 1px solid ;
border-right: solid 1px;
}
.my-table tbody td {
border-top: none;
border-left: none;
border-bottom: 1px dotted;
border-right: 1px solid;
}
.my-table input[type="text"] {
width:0;
min-width:100%;
box-sizing: border-box;
}
<!-- language: lang-html -->
<table class="my-table">
<thead>
<tr>
<th>
<div>
ID
</div>
<div>
<input type="text">
</div>
</th>
<th>
<div>
Name
</div>
<div>
<input type="text">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1245</td>
<td>Michael Knight</td>
</tr>
<tr>
<td>1247</td>
<td>Devon Miles</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论