我希望我的 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 ><input 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>
uj5u.com熱心網友回復：
根據 OP 的評論使用 Bootstrap 更新。同樣的理念，這次只是使用框架而不是基本的 HTML。我稍微收緊了您的代碼并添加了一些樣式，如果您不喜歡它可以將其洗掉，但主要部分已完成。我使用百分比值添加了一些填充，如果您打算使用多個按鈕，則文本感覺更明顯地居中，額外的列包含一個或多個編輯按鈕。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 ><input 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/487852.html
上一篇：我必須做什么才能在React.JS的“App.js”中宣告一個變數并將“return()”中的這個變數用于App函式？