How to Make Last Cell of a Row in a Table Occupy All Remaining Width

How to make last cell of a row in a table occupy all remaining width

You will need to tell the first two columns not to wrap and give the last column a width of 99%:

<table width="100%">
       <tr>
         <td style="white-space: nowrap;">
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td style="white-space: nowrap;">
            COLUMN TWO
         </td>
         <td width="99%">
           LAST
         </td>
       </tr>
     </table>

Edit: You should put that all styles / presentation in (external...) css.

Using classes for the columns (you could use css3 selectors like nth-child() instead if you only target modern browsers):

html:

<tr>
  <td class="col1">
  // etc

css:

.col1, .col2 {
  white-space: nowrap;
}
.col3 {
  width: 99%;
}

HTML table last td to take remaining width

You can give the first td a small width, e.g. 1px, with white-space: nowrap;

table {

  width: 100%;

  border-collapse: collapse;

}

td {

  border: 1px solid red;

}

td:first-child {

  width: 1px;

  white-space: nowrap;

}

<table>

  <tr>

    <td>short content</td>

    <td>long content</td>

  </tr>

</table>

How do I get the rightmost column to fill the remaining space?

I have found a simple solution:

table td:last-child {
    width: 100%;
}

Result:

body {
    font: 12px sans-serif;
}

table {
    width: 100%;

    background-color: #222222;
    color: white;
    border-collapse: collapse;
}

table th {
    padding: 10px;
    text-align: left;
}

table td {
    padding: 2px 10px;
}

table td:last-child {
    width: 100%;
}

table td:nth-child(odd), table th:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:last-child td {
    padding-bottom: 10px;
}

<table>
    <tr>
        <th>Product</th>
        <th>Cardinality</th>
        <th>Price per item</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>5</td>
        <td>$2</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td>3</td>
        <td>$3</td>
    </tr>
    <tr>
        <td>Sausage</td>
        <td>10</td>
        <td>$0.5</td>
    </tr>
    <tr>
        <td>Pineapple</td>
        <td>2</td>
        <td>$8</td>
    </tr>
    <tr>
        <td>Tomato</td>
        <td>5</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>Lightsaber</td>
        <td>2</td>
        <td>$99 999</td>
    </tr>
</table>

How to make a table cell stretch for the rest of the width?

You can do this with this CSS code :

.table tr td:nth-child(2) { width:100% }

Make the last cell of a table row eat all the white space

This css should take care of it:

th:last-child, td:last-child {width:100%;}

However, that's going to try to squish all the other cells leftward. So you might want to add this for a consistent height in the column headings:

thead {white-space:nowrap;}

CSS Table with one column taking remaining space

Here is an answer using divs instead of a table: DEMO

HTML

<div class="container">
    <div class="fnl first">First Baby</div>
    <div class="fnl last">Last Guy</div>
    <div class="adjust">I will adjust between both of you guys</div>
</div>

CSS

.container{
    width: 300px;
}
.first{
    float:left;
    background: red;
}
.last{
    float:right;
    background: orange;
}
.adjust{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

html table -- set column to take remaining space, and at least 300px width

I think the problem lies with table-layout: fixed;

According to here, the value fixed will set a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Could be why the min-width is not working for the td.

table {

  display: table;

  width: 100%;

  /* table-layout: fixed; */

  white-space: nowrap;

  color: white;

}

table td {

  overflow: hidden;

}

td.fixed-width {

  background: blue;

  width: 200px;

  min-width: 200px;

}

td.remaining-width-or-300-pixels {

  background: red;

  overflow: hidden;

  min-width: 300px;

 

}

<table>

  <tr>

    <td class="fixed-width">A set width column</td>

    <td class="remaining-width-or-300-pixels">

    A column 

    </td>

    <td class="fixed-width">A set width column</td>

  </tr>

</table>

Position the last HTML Table Cell to the right side of the Body

To keep it simple, I only kept the relevant part.

First, as said, id are unique. Don't set the same id for more than one element. Personnaly, I avoid to use them abusively (only if I need to reference them directly in DOM manipulation or CSS design).

Also try to avoid duplicate CSS rules, if some elements share a design, wisely regroup their rules. Easy maintenance is a short and long-term goal.

Finally, as you can see, in the snippet below, I used semantic id and class names, to be able to find out what designs what later on.

#printPage {

  margin: 0px;

  padding: 0px;

  width: 910px;

  height: 40px;

  margin-bottom: 0.4%;

  font-family: arial, sans-serif;

}

div#section-example {

  margin-top: 0.5%;

  padding: 0px;

  border: 1.5px solid black;

  width: 670px;

  height: 925px;

}

div#section-example header {

  margin-left: 0.5%;

  font-weight: bold;

  margin-bottom: 0px;

}

table.example {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

  margin-bottom: 0%;

  margin-top: 0.3%;

}

table.example th,

table.example td {

  vertical-align:top;

  text-align: left;

  font-size: 8pt;

  /* The following rule (white-space) is used to allow the last cell   */

  /* to fill the remaining width.                                      */

  /* see https://stackoverflow.com/a/1060967/4375327                   */

  white-space: nowrap;

}

table.example th {

  /* padding to keep THs right aligned with TDs                        */

  padding: 0 5px 0 5px;

}

table.example td {

  padding: 5px;

}

table.example tr.last-row th,

table.example tr.last-row td {

  background-color: #eeeeee;

}

table.example tr.last-row th.total,

table.example tr.last-row td.total {

  /* The following rule (width) is used to allow the last cell to fill */

  /* the remaining width.                                              */

  /* see https://stackoverflow.com/a/1060967/4375327                   */

  width: 99%;

  text-align: right;

}

<div id="printPage">

  <div id="section-example">

    <header>WED 10/3/2018</header>

    <table class="example">

      <tr>

        <th>Shift start</th>

        <th>Time In</th>

        <th>Time Out</th>

        <th>Break 1</th>

        <th>Break 2</th>

        <th>Break Hours</th>

        <th>Clocked Hours</th>

        <th>Payable</th>

      </tr>

      <tr>

        <td>9:00 AM</td>

        <td>8:52 AM</td>

        <td>-</td>

        <td>11:30 AM- <br>12:00 PM</td>

        <td>-</td>

        <td>0.5</td>

        <td>4.85</td>

        <td>4.35</td>

      </tr>

      <tr class="last-row">

        <th>Incentive</th>

        <th>Holiday</th>

        <th>Personal</th>

        <th>Vacation</th>

        <th colspan=4>Off-Clock</th>

        <th class="total">Total</th>

      </tr>

      <tr class="last-row">

        <td>0.00</td>

        <td>0.00</td>

        <td>0.00</td>

        <td>0.00</td>

        <td colspan=4>0.00</td>

        <td class="total">4.35</td>

      </tr>

    </table>

  </div>

---

Related Topics