[英]Different alignments for different items in a single table row
I want my HTML table to look like this.我希望我的 HTML 表格看起来像这样。
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.我无法弄清楚要使用的正确 CSS 是什么。 I have mentioned the HTNMl code with the CSS.我已经提到了带有 CSS 的 HTNMl 代码。 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>
Updated with Bootstrap per OP's comment.根据 OP 的评论使用 Bootstrap 更新。 Same philosophy, just using a framework this time instead of basic HTML.同样的理念,这次只是使用框架而不是基本的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.