Different alignments for different items in a single table row

user_16008575 0
Viewed 63

I want my HTML table to look like this.

Table

The content/phone no. should be in the middle of that table row and the edit icon should be at the right of the same row. I cannot figure out what would be the correct CSS to use. I have mentioned the HTNMl code with the CSS. Please let me know about the same.

Code

<style>
tr,
td,
th {
    border: 1px solid black;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 350px;
}

table tr th,
table tr td {
    border-right: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
    padding: 5px;
}

table tr th:first-child,
table tr td:first-child {
    border-left: 1px solid rgb(0, 0, 0);
}

table tr th {
    background: rgb(0, 0, 0);
    border-top: 1px solid rgb(0, 0, 0);
    text-align: left;
}


/* top-left border-radius */

table tr:first-child th:first-child {
    border-top-left-radius: 20px;
}


/* top-right border-radius */

table tr:first-child th:last-child {
    border-top-right-radius: 20px;
}


/* bottom-left border-radius */

table tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}


/* bottom-right border-radius */

table tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}
</style>
<div style="
          margin-top: 2rem;
          display: flex;
          justify-content: center;
          align-content: center;
          padding-right: 15rem;
          padding-left: 15rem;
          margin-bottom: 3rem;
        ">
    <table class="table table-striped table-hover" style="display: none" id="table">
        <tbody>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">ProfileUID :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">First Name :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">Email :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">Profile Status :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">Country Code :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">Phone No. :</th>
                <td>
                    <!-- <div class="input-group input-group-sm col-xs-4"><input class="form-control inputlg" type="text" placeholder="Enter Value" name="value" id="value" /></div> -->
                    <button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872; position:absolute; right:390px; top:461px" onclick="edit()"><i class="fa-solid fa-square-pen fa-2x"></i></button>
                </td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">Employee ID :</th>
                <td></td>
            </tr>
            <tr align="center">
                <th class="col-sm-4 text-center" scope="row">User ID :</th>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
bootstrap-4 css dom html
1 Answers

Updated with Bootstrap per OP's comment. Same philosophy, just using a framework this time instead of basic HTML. I tightened up your code a little bit and added some styling as well which you can remove if you don't like it but the main part is done. I added some padding using a percentage value just so the text felt more perceivably centered with the extra column holding the edit button or buttons if you're planning to use more than one.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
button {
  border: none;
  background-color: transparent;
  color: #001872;
  padding: 9px 0px 5px 0px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 20px 0px 20px 0;
  overflow: hidden;
}

.black {
  background: black;
}

.darkGrey {
  background: #262626;
}

table tr th {
  color: white;
}

table tr th:first-child,
table tr td:first-child {
  border-top: 2px solid black;
}

table tr th:last-child,
table tr td:last-child {
  text-align: right;
  padding: 0 10px;
  border-top: 2px solid black;
}

table tr th:nth-child(2),
table tr td:nth-child(2) {
  padding-left: 20%;
  border-left: 2px solid black;
  border-top: 2px solid black;
}

table tr:first-child th:first-child {
  border-top: none;
}

table tr:first-child td {
  border-top: none;
}
</style>

<div style="
          margin-top: 2rem;
          display: flex;
          justify-content: center;
          align-content: center;
          padding-right: 15rem;
          padding-left: 15rem;
          margin-bottom: 3rem;
        ">
  <table class="table table-striped table-hover" id="table">
    <tbody>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">ProfileUID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">First Name :</th>
        <td> +178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">Email :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Profile Status :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">Country Code :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Phone No. :</th>
        <td>+178xxxxxx885
          <!-- <div class="input-group input-group-sm col-xs-4"><input class="form-control inputlg" type="text" placeholder="Enter Value" name="value" id="value" /></div> -->
        </td>
        <td><button type="button" id="edit" onclick="edit()"><i class="fa-solid fa-square-pen fa-2x"></i></button></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row"> Last Generated OTP : </th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Employee ID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">User ID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

user_85650100
Related