CODEWITHSUNDEEP
htmlcsscolumn-width
Bharat Nanwani
Bharat Nanwani

Reputation: 703

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

May I request some to help me with below HTML and CSS please? I'm trying to have the 2nd column's width 100% of its container. Below CSS is working but then I'm unable to adjust the first column's width.

.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>

Upvotes: 1

Views: 2697

Answers (3)

Zmyx
Zmyx

Reputation: 71

You have to set table width to 100%, then you can set max-width to 100% for the second column.

.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%;
}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122085

You can use calc like this width: calc(100% - 150px) just set width: 100% on your table

.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>

Upvotes: 2

Ahmed Salama
Ahmed Salama

Reputation: 2825

First you should make the table width:100% then just remove the width of the second column . it will automatic fill the available space after 150px of the first column.

table{
  width:100%;
}
.VendorInfo td, .VendorInfo table {
    border: 1px solid black;
    border-collapse: collapse;
}

.VendorInfo td:nth-child(odd) {
    width: 150px;
}

Demo : https://jsfiddle.net/5bxu2wrn/

Upvotes: 0

Related Questions