再會。我有兩列的表格：第一列用于標簽，第二列用于控制元素。標簽可以很短也可以很長。
table{
padding-bottom: 20px;
}
td{ border: 1px solid}<table style="width:100%;">
<tr>
<td class="first-column">very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td class="first-column">medium label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
</table>我需要根據內容（最長標簽的寬度）調整第一列的大小，但如果標簽很長，它不應填充超過 50% 的表格。像這樣的東西
你能幫我為這種情況撰寫正確的css嗎？我不能使用 Javascript，它應該是 css-only 解決方案。
uj5u.com熱心網友回復：
顯而易見的事情是添加最大寬度，但是，我們不能只在表格中這樣做。在這里我使用 flexbox 來解決這個問題。
tr {
display:flex;
}
.first-column {
max-width: 50%;
}
.second-column {
flex:1;
}
uj5u.com熱心網友回復：
此代碼段“注意到”第二列的最小寬度為 50%。
它將 tr 設定為 flex，以便單元格可以適應全寬，輸入的寬度為可用的 100%。它還將 box-sizing 設定為 border-box，以便 50% 考慮任何填充等。
更新：此代碼段使用問題的編輯版本中顯示的 3 個表：
table,
tr,
td {
box-sizing: border-box;
margin: 0;
padding: 0;
}
tr {
width: 100%;
display: flex;
align-items: center;
}
td {
border: 1px solid black;
}
.second-column {
flex: 1;
min-width: 50%;
}<table style="width:100%;">
<tr>
<td class="first-column">very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very
very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td class="first-column">medium label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
<tr>
<td class="first-column">label</td>
<td class="second-column"><input style="width:100%" /></td>
</tr>
</table>uj5u.com熱心網友回復：
我對此的建議是首先 - 除非由于其他原因這是不切實際的 - 將所有標簽和<input>元素合并到同一個父元素中，這簡化了所有列的對齊方式。
為此，我將元素分組為一個<fieldset>元素，它本身在一個<form>:
/* Generic CSS reset: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
form {
border: 1px solid currentColor;
/* using CSS logical properties to place a 1em margin
on the block axis (top/bottom) in left-to-right, top-
to-bottom languages) */
margin-block: 1em;
/* ...and a margin of auto (to centre the element) on
the inline-axis (left and right in ltr languages): */
margin-inline: auto;
padding: 0.2em;
width: 90vw;
}
fieldset {
/* in order to use CSS Grid: */
display: grid;
/* setting gaps/'gutters' between rows of 0.5em,
and 0.25em gaps between adjacent columns: */
gap: 0.5em 0.25em;
/* defining two columns, one of which is sized
between the minim and maximum sizes of:
'min-content' (the smallest size in which the
content can be displayed) and 50% (of the parent-
element, if you need 50% of the screen then you
could use 50vw instead) and of 1fr (one fractional-
unit of the available space remaining) */
grid-template-columns: minmax(min-content, 50%) 1fr;
}
label {
/* to indicate interactivity: */
cursor: pointer;
/* for positioning the pseudo element: */
position: relative;
}
/* entirely irrelevant to the demo, but just to
make it look a little prettier (adjust to
taste or remove as you like): */
label::before {
content: '';
background: linear-gradient(90deg, lime, #ffff);
height: 100%;
position: absolute;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
transform-origin: 0 100%;
width: 100%;
z-index: -1;
}
label:hover::before {
transform: scaleX(1);
}<form action="#">
<fieldset>
<!-- because we're using a grid (and the majority of browsers don't yet
support display: subgrid) to create the aligned columns, the <input>
elements are the following-siblings of the <label> elements; in order
to associate the <label> with the correct <input> I've added an 'id'
attribute to each <input>, and the same id-value for the associated
<label> in their 'for' attribute; this means clicking/tapping on a
<label> will focus the appropriate <input>: -->
<label for="inputElement_0">
very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very label</label>
<input id="inputElement_0">
<label for="inputElement_1">label</label>
<input id="inputElement_1">
<label for="inputElement_2">medium label</label>
<input id="inputElement_2">
<label for="inputElement_3">label</label>
<input id="inputElement_3">
<label for="inputElement_4">label</label>
<input id="inputElement_4">
<label for="inputElement_5">label</label>
<input id="inputElement_5">
</fieldset>
</form>JS小提琴演示。
如果 subgrid 在您的瀏覽器中可用（目前它僅在 Firefox 中可用），那么以下是可能的：
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
form {
border: 1px solid currentColor;
margin-block: 1em;
margin-inline: auto;
padding: 0.2em;
width: 90vw;
}
fieldset {
display: grid;
gap: 0.5em 0.25em;
grid-template-columns: minmax(min-content, 50%) 1fr;
}
label {
cursor: pointer;
/* in order to use subgrid, we first have to
declare that we're using CSS grid: */
display: grid;
/* here we position the <label> elements in
grid-column 1, and set the element to
span two columns: */
grid-column: 1 / span 2;
/* here we state that we're using the grid-columns
of the parent element: */
grid-template-columns: subgrid;
position: relative;
}
label::before {
content: '';
background: linear-gradient(90deg, lime, #ffff);
height: 100%;
position: absolute;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
transform-origin: 0 100%;
width: 100%;
z-index: -1;
}
label:hover::before {
transform: scaleX(1);
}<form action="#">
<fieldset>
<!-- because we can use subgrid, we can place the <input> elements
inside of their associated <label> elements, which removes the
need to assign either a 'for' attribute to the <label> or an
'id' attribute to the <input>, since they're automatically
associated this way via nesting: -->
<label>
very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very label
<input>
</label>
<label>label
<input>
</label>
<label>medium label
<input>
</label>
<label>label
<input>
</label>
<label>label
<input>
</label>
<label>label
<input>
</label>
</fieldset>
</form>JS小提琴演示。
uj5u.com熱心網友回復：
td{
border: 1px solid black;
width: 100%;
}
td.first-column {
max-width: 50%;
min-width: 10px;
}<table style="width:100%;">
<tr>
<td class="first-column">very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td class="first-column">short label</td>
<td class="second-column"><input style="width:100%"/></td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324895.html
標籤：html css html-table 宽度 上校
上一篇：自動關閉HTML頁面