如何仅在 html 和 css 中让最后一列的宽度为 100%？

Question

我可以请求一些人帮助我完成以下 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>

Answer 1

您可以像这样使用 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>

Answer 2

首先，您应该制作 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;
}

演示：https://jsfiddle.net/5bxu2wrn/

Answer 3

您必须将 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%？

How to have 100% width for last column only in html and css?

html

css

column-width