-1
我打算將一些行添加到標記分組行的HTML表中。見下圖。 是否可以在表中繪製這些藍線？謝謝。如何在網頁中繪製線條？
http://jsbin.com/kogijixici/1/edit?html,output
<table><tr></tr></table>
A
回答
2
使用下面的CSS，你會得到你的結果：
td[rowspan] {
position: relative;
}
td[rowspan]:before {
content: '';
height: 80%;
width: 20%;
border: 2px solid blue;
border-right: none;
position: absolute;
top: 10%;
right: 10px;
}
這裏是jsbin鏈接：http://jsbin.com/juzasemeje/edit?html,css,output 您可以自定義一點點地滿足您的要求的值。
2
是這個輸出る期待
校驗輸出在Jsbin.com
.border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}
更新烏爾CSS如上
+0
和我的想法一樣。但請使其更通用，因爲行跨度的數量可能不同。 –
+0
@ManhLe我沒有得到R U的評論？ –
+1
我的意思是'height：50px'在其他情況下並不總是很好看。行高越高（ex> = 6），'td'邊界的空白就越多。如果我們可以設置相對於「td」高度的邊框高度，那會更好。 –
1
試試這個
.td-line {
position: relative;
}
.td-line:before {
content: '';
display: block;
width: 20px;
height: 73%;
position: absolute;
right: 10px;
top: 13%;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
border-left: solid 1px blue;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<th width="150" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
</tr>
<tr>
<td rowspan="3" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>相關問題
- 1. 如何使用html，css和javascript在網頁上繪製線條
- 2. 如何在android中繪製一條線？
- 3. 如何在UICollectionView中繪製一條線？
- 4. 如何在Webforms中繪製線條？
- 5. 如何在R中繪製線條？
- 6. 如何在Titanium中繪製線條？
- 7. 如何在VIM中繪製線條？
- 8. 如何在ggplot2中繪製兩條線
- 9. 在窗體上繪製線條網格
- 10. 我們如何在網頁中繪製垂直線？
- 11. Windowsforms：如何在DataGridView上繪製線條？
- 12. 如何在圖表上繪製線條？
- 13. 如何在iPad上繪製線條圖？
- 14. 如何在頁面末尾繪製一條線？
- 15. 在gtk.TextView上繪製線條
- 16. 如何在JPanel中使用paintComponent繪製軸線和線條圖
- 17. vis.js當前時間線：如何在vis.js中繪製線條
- 18. 繪製直線的線條
- 19. Android：如何繪製圓角的線條？
- 20. 如何使用SVG繪製線條？
- 21. 如何爲CKComponent（ComponentKit Facebook）繪製線條？
- 22. 如何用Gnuplot繪製線條圖？
- 23. 如何使用XNA繪製線條？
- 24. opengl如何繪製動態線條？
- 25. 如何用ggplot2繪製樣條曲線？
- 26. 我希望能夠在網頁的代碼隱藏中繪製線條
- 27. 如何在java中使用繪製線繪製樓梯線？
- 28. 在grafana中繪製一條曲線
- 29. D3在循環中繪製線條
- 30. 在pygame中繪製快速線條
在我的第一個設想，你可以欺騙作爲'div'和頂部設置邊框，左側，底部。 –