How to align a button to the button of a table cell without the attribute position?-CodePudding

I'm not able to align a button always to the bottom of a table cell.

I can't use position:relative because i want to be able to align the button and make use of margin of the button and padding of the cell.

Is there an option to this problem?

Thanks!

 .t {
      width: 100%;
      border: 1px solid black;
    }
    
    td {
      text-align: center;
      border: 1px solid red;
      height: 50px
    }
    
    td:has(button) {
      display: table-cell;
      vertical-align: bottom;
    }
    
    button {
      display: inline-block;
    }
    label {
      display: inline-block;
    }

<table >
      <tr>
        <th>first</th>
        <th>sec</th>
        <th>third</th>
      </tr>
      <tr>
        <td>cell1</td>
        <td>

          <button>btn</button>
        </td>
        <td>
           Cell2
        </td>
      </tr>
      <tr>
        <td>cell1</td>
        <td>
          <label>Cell1</label>
          <button>btn</button>
        </td>
        <td>
           Cell2
        </td>
      </tr>
    </table>

CodePudding user response：

You can display the button as a inline-block and use vertical-align:bottom to align the content of the cell to the bottom:

.t {
  width: 100%;
  border: 1px solid black;
}

td {
  text-align: center;
  border: 1px solid red;
  height: 50px
}

td:has(button) {
  vertical-align: bottom;
}

button {
  display: inline-block;
}

<table >
  <tr>
    <th>first</th>
    <th>sec</th>
    <th>third</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <button>btn</button>
    </td>
    <td>
       Cell2
    </td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <button>btn</button>
    </td>
    <td>
       Cell2
    </td>
  </tr>
</table>

If you want to place a label or other content above the button while keeping the button at the bottom. You can do it like this:

.t {
  width: 100%;
  border: 1px solid black;
}

td {
  text-align: center;
  border: 1px solid red;
  height: 100px;
}


td .cell-inner {
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  text-align: center;
}

td .cell-outer {
  height: 100%;
  display: inline-block;
}

div.cell-inner:has(> button:only-child)  {
  flex-direction: column-reverse;
}

#exampleContainer {
  display:flex;
  flex-direction: column;
  border: 1px dotted blue;
}

<table >
  <tr>
    <th>first</th>
    <th>sec</th>
    <th>third</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <div >
        <div >
          <button>btn</button>
        </div>
      </div>
    </td>
    <td>
       <div >
        <div >
          <label>asd</label>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>
      <div >
        <div >
          <label>asd</label>
          <button>btn</button>
        </div>
      </div>
    </td>
    <td>
       <div >
        <div >
          <div id="exampleContainer">
            <label>asd</label>
            <label>asd2</label>
          </div>
          <button>btn</button>
        </div>
      </div>
    </td>
  </tr>
</table>

There is probably a wayyy better solution than the above but it works.