所以我正在处理表格。我想要表单的功能部分需要在同一个tr中选择框和输入(文本)框。该tr中的其他项只是文本框。我在获取与tr共享tr的文本框时遇到问题,选择转到独奏文本框所在的位置。因此,右边缘不对齐。
我在找什么......
1)我希望单独的文本框填充框,理想情况下不添加宽度。我很好,最小宽度为550px,但没有必要。
2)我希望带有选择的文本框填充框的 rest ,与独奏框符合相同的边缘。满足强迫症...
表格的CSS:
table, th, td {
border: 1px solid var(--main-color);
padding: 6px 8px;
white-space: nowrap;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
thead {
background-color: #333;
border-bottom: 3px solid var(--main-color);
}
thead th, thead a, thead a:visited {
color: white;
}
th.active {
background: var(--main-color);
}
table > :not(thead) tr th {
background-color: #333;
border-right: 3px solid var(--main-color);
color: white;
text-align: right;
}
tr {
height: auto;
}
td {
color: black;
}
table input {
width:100%; /* simply scale inputs to table cell size */
}
td.input-group input {
width:auto; /* but not for radios or checks */
}
HTML(缩写,只有一个独立文本框和一个与选择共享的文本框):
<table>
<tr>
<td>Serial Number: </td>
<td><input type="text" name="device-serial-number" maxlength="8" required></td>
</tr>
<tr>
<td>MAC Address NIC: </td>
<td>
<select name="media-nic">
<option value="">Media</option>
<option value="eth">Ethernet</option>
<option value="inf">Infiniband</option>
<option value="fib">Fiber</option>
</select>
<input type="text" name="mac-nic" maxlength="17">
</td>
</tr>
</table>
提供更多CSS等等:https://jsfiddle.net/2o0sn4ep/
答案 0 :(得分:1)
您可以在 question
中使用标记为正确答案的技巧使用这个不错的&#34;技巧&#34;我修改了一下你的css和html(我添加了一个div容器来包装你的第二个输入)。
它也有响应,您的输入将始终填充容器中剩余的任何宽度
:root {
--main-color: rgb(46, 58, 150);
}
* {
box-sizing: border-box;
}
table,
th,
td {
border: 1px solid var(--main-color);
padding: 6px 8px;
white-space: nowrap;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
thead {
background-color: #333;
border-bottom: 3px solid var(--main-color);
}
thead th,
thead a,
thead a:visited {
color: white;
}
th.active {
background: var(--main-color);
}
table >:not(thead) tr th {
background-color: #333;
border-right: 3px solid var(--main-color);
color: white;
text-align: right;
}
tr {
height: auto;
}
td:first-child {
text-align: right;
}
td {
color: black;
}
input[type=text] {
padding: 9px 10px;
font-size: 16px;
width: 100%;
}
select {
padding: 9px 10px;
font-size: 16px;
height: 41px;
float: left;
margin-right: 5px;
}
option {
padding-top: 2px;
padding-bottom: 2px;
}
div {
width: auto;
overflow: hidden;
}
&#13;
<table>
<tr>
<td>Serial Number: </td>
<td>
<input type="text" maxlength="8" required>
</td>
</tr>
<tr>
<td>MAC Address NIC: </td>
<td>
<select>
<option value="">Media</option>
<option value="eth">Ethernet</option>
<option value="inf">Infiniband</option>
<option value="fib">Fiber</option>
</select>
<div>
<input type="text" maxlength="17">
</div>
</td>
</tr>
</table>
&#13;