01/10/2018, 10:59
Chèn thẻ <div> vào thẻ <tr> bị tràn ra ngoài
Chào cả nhà, mình đang làm một trang, trong đó mình cần append thẻ div vào thẻ tr của 1 bảng để highlight nó theo kiểu progress bar chạy màu xanh (hiện tại mình để tĩnh):
https://jsfiddle.net/chiendang/bph8w7q3/4/
Code như sau:
HTML:
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="highlight">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
JS:
$("#highlight").append('<div id="playingBar"></div>');
$("#playingBar").css("left", $("#highlight").position().left);
$("#playingBar").css("height", $("#highlight").height());
CSS:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#playingBar {
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(0,255,0,0.4);
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}
Nhưng kết quả không được như mong muốn, cái div mình chèn vào nó ko nằm gọn trong tr mà lại lòi ra ngoài 1 tí ^^.
Code và kết quả ở đây: https://jsfiddle.net/chiendang/bph8w7q3/4/
Mọi người xem có cách nào xử lý chỗ này giúp mình với, mình cảm ơn nhiều
Bài liên quan
