-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. 如何使用dojo在網頁上繪製線條
- 3. 如何在android中繪製一條線？
- 4. 如何在R中繪製線條？
- 5. 如何在Webforms中繪製線條？
- 6. 如何在VIM中繪製線條？
- 7. 如何在Titanium中繪製線條？
- 8. 如何在Sprite-kit中繪製線條
- 9. 如何在UICollectionView中繪製一條線？
- 10. 如何在OpenGl中繪製線條？
- 11. 如何在chart.js中繪製多條線
- 12. 如何在ggplot2中繪製兩條線
- 13. 在OpenGL中繪製線條
- 14. 在窗體上繪製線條網格
- 15. 我們如何在網頁中繪製垂直線？
- 16. 如何在webform上繪製線條
- 17. Windowsforms：如何在DataGridView上繪製線條？
- 18. 如何在圖表上繪製線條？
- 19. 如何在iPad上繪製線條圖？
- 20. 如何在繪製線條時向JPanel添加背景網格？
- 21. 如何在頁面末尾繪製一條線？
- 22. nls最適合的線條 - 如何強制繪製線條？
- 23. 在gtk.TextView上繪製線條
- 24. vis.js當前時間線：如何在vis.js中繪製線條
- 25. 如何在JPanel中使用paintComponent繪製軸線和線條圖
- 26. 繪製直線的線條
- 27. 如果線條「---」如何用itextsharp繪製一條線？
- 28. S in SOLID - 你如何繪製線條？
- 29. 如何繪製使用「*」的線條
- 30. 如何爲CKComponent（ComponentKit Facebook）繪製線條？
在我的第一個設想，你可以欺騙作爲'div'和頂部設置邊框，左側，底部。 –