如何仅在 html 和 css 中让最后一列的宽度为 100%?
How to have 100% width for last column only in html and css?
我可以请求一些人帮助我完成以下 HTML 和 CSS 吗?我试图让第二列的宽度达到其容器的 100%。 CSS 下可以正常工作,但我无法调整第一列的宽度。
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: 100%;
}
<div class="VendorInfo">
<table>
<tr>
<td>
<label>Vendor ID</label>
</td>
<td><span>00005467</span>
</td>
</tr>
<tr>
<td>
<label>Vendor Name</label>
</td>
<td><span>Holiday Inn</span>
</td>
</tr>
<tr>
<td>
<label>Area Name</label>
</td>
<td><span>Andheri West</span>
</td>
</tr>
<tr>
<td>
<label>City Name</label>
</td>
<td><span>Mumbai</span>
</td>
</tr>
</table>
</div>
您可以像这样使用 calc
width: calc(100% - 150px)
只需在您的 table
上设置 width: 100%
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: calc(100% - 150px);
}
<div class="VendorInfo">
<table>
<tr>
<td><label>Vendor ID</label></td>
<td><span>00005467</span></td>
</tr>
<tr>
<td><label>Vendor Name</label></td>
<td><span>Holiday Inn</span></td>
</tr>
<tr>
<td><label>Area Name</label></td>
<td><span>Andheri West</span></td>
</tr>
<tr>
<td><label>City Name</label></td>
<td><span>Mumbai</span></td>
</tr>
</table>
</div>
首先,您应该制作 table width:100%
,然后删除第二列的宽度。它会在第一列的 150px 之后自动填充可用的 space。
table{
width:100%;
}
.VendorInfo td, .VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
您必须将 table 宽度设置为 100%,然后您可以将第二列的最大宽度设置为 100%。
.VendorInfo td, .VendorInfo table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 20%;
}
.VendorInfo td:nth-child(even) {
max-width: 100%;
}
我可以请求一些人帮助我完成以下 HTML 和 CSS 吗?我试图让第二列的宽度达到其容器的 100%。 CSS 下可以正常工作,但我无法调整第一列的宽度。
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: 100%;
}
<div class="VendorInfo">
<table>
<tr>
<td>
<label>Vendor ID</label>
</td>
<td><span>00005467</span>
</td>
</tr>
<tr>
<td>
<label>Vendor Name</label>
</td>
<td><span>Holiday Inn</span>
</td>
</tr>
<tr>
<td>
<label>Area Name</label>
</td>
<td><span>Andheri West</span>
</td>
</tr>
<tr>
<td>
<label>City Name</label>
</td>
<td><span>Mumbai</span>
</td>
</tr>
</table>
</div>
您可以像这样使用 calc
width: calc(100% - 150px)
只需在您的 table
width: 100%
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: calc(100% - 150px);
}
<div class="VendorInfo">
<table>
<tr>
<td><label>Vendor ID</label></td>
<td><span>00005467</span></td>
</tr>
<tr>
<td><label>Vendor Name</label></td>
<td><span>Holiday Inn</span></td>
</tr>
<tr>
<td><label>Area Name</label></td>
<td><span>Andheri West</span></td>
</tr>
<tr>
<td><label>City Name</label></td>
<td><span>Mumbai</span></td>
</tr>
</table>
</div>
首先,您应该制作 table width:100%
,然后删除第二列的宽度。它会在第一列的 150px 之后自动填充可用的 space。
table{
width:100%;
}
.VendorInfo td, .VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
您必须将 table 宽度设置为 100%,然后您可以将第二列的最大宽度设置为 100%。
.VendorInfo td, .VendorInfo table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 20%;
}
.VendorInfo td:nth-child(even) {
max-width: 100%;
}