单个表格行中不同项目的不同对齐方式

Question

我希望我的 HTML 表格看起来像这样。

桌子

内容/电话号码应该在该表行的中间，并且编辑图标应该在同一行的右侧。 我无法弄清楚要使用的正确 CSS 是什么。 我已经提到了带有 CSS 的 HTNMl 代码。 请让我知道同样的情况。

代码

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

Answer 1

根据 OP 的评论使用 Bootstrap 更新。 同样的理念，这次只是使用框架而不是基本的 HTML。 我稍微收紧了您的代码并添加了一些样式，如果您不喜欢它可以将其删除，但主要部分已完成。 我使用百分比值添加了一些填充，如果您打算使用多个按钮，则文本感觉更明显地居中，额外的列包含一个或多个编辑按钮。

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