5 ways to achieve the diagonal header effect in the table
|
Everyone must be familiar with table. We often encounter it in the code. Then it is sometimes necessary to add a slash header to the table, but how to achieve this effect? I have summarized the following methods: 1. The simplest method Go directly to the company's UI and ask her to make a picture, put it here as the background picture, and then fill it up. Isn’t it simple! ! ! 2. A fairly simple approach In fact, friends who are familiar with CSS3, when they see this effect, the transform attribute immediately comes to their mind. Yes, this is indeed possible, and it is also very simple. The only problem is that you need to pay attention to the browser compatibility issue. Everyone should always maintain a sense of crisis in their hearts (IE still exists). If your company requires compatibility only with Chrome, then this method is suitable for you. 3. Very simple method
.biaoTou {
border-top: 200px #199fff solid; /*The width of the top border is equal to the height of the first row of the table*/
border-left: 200px #ff8838 solid; /*The left border width is equal to the width of the first cell of the first row of the table*/
}
<td width="200">
<div class="biaoTou">
</div>
</td>
This method is also very simple, just write it down according to the above format. However, this writing method has an obvious problem: it actually uses two different colors of border to divide the diagonal line of the table header. The colors on both sides of the diagonal line cannot be the same. This method can be used if you are doing some promotional activities or other forms. But if we need the colors on both sides of the diagonal line to be the same, this approach is not applicable. Use with caution. 4. A very simple approach This effect can actually be achieved using another new tag in CSS3, canvas. Using it as a canvas to draw a diagonal line is a very simple approach, so I won’t explain it in detail. However, there is also a problem, which is the old compatibility issue. If it is only compatible with Chrome, you can do whatever you want (why does our company always have to consider the damn IE? I also want to only do projects that are compatible with Google). 5. Not a simple approach That's the js approach
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Slash Header</TITLE>
<meta http-equiv="content-type" content="charset=gbk">
</HEAD>
<body leftmargin=0 topmargin=0>
<br>
<div height="300">header</div>
<hr>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400
style="margin-left: 100px;">
<TR bgcolor="FFFFFF">
<TD width="111" height="52"><table width="100%" height="100%"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td1"></td>
<td>Results</td>
</tr>
<tr>
<td>Name</td>
<td id="td2"></td>
</tr>
</table></TD>
<TD width="81">Mathematics</TD>
<TD width="96">English</TD>
<TD width="99">C language</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Zhang San</TD>
<TD>55</TD>
<TD>66</TD>
<TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Li Si</TD>
<TD>99</TD>
<TD>68</TD>
<TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Wang Wu</TD>
<TD>33</TD>
<TD>44</TD>
<TD>55</TD>
</TR>
</TABLE>
<script type="text/javascript">
function a(x, y, color) {
document
.write("<img border='0' style='position: absolute; left: "
+ (x)
+ "; top: "
+ (y)
+ ";background-color: "
+ color
+ "' src='px.gif' width=1 height=1>")
}
function getTop(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetTop;
while (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetTop;
vParentvParent = vParent.offsetParent;
}
return t;
}
function getLeft(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetLeft;
while (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetLeft;
vParentvParent = vParent.offsetParent;
}
return t;
}
function line(x1, y1, x2, y2, color) {
var tmp
if (x1 >= x2) {
tmp = x1;
x1 = x2;
x2 = tmp;
tmp = y1;
y1 = y2;
y2 = tmp;
}
for ( var i = x1; i <= x2; i++) {
x = i;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
a(x, y, color);
}
}
//line(1,1,100,100,"000000");
line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,
getTop(td1) + td1.offsetHeight, '#000000');
line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,
getTop(td2) + td2.offsetHeight, '#000000');
</script>
</BODY>
</HTML>Okay, I have explained the five methods. I hope they will be helpful for your study. I also hope that you will support 123WORDPRESS.COM. |
<<: Detailed explanation of the integer data type tinyint in MySQL
>>: CSS to achieve single-select folding menu function
Recommend
Analysis and application of irregular picture waterfall flow principle
The layout problem of irregular picture walls enc...
Docker installation tomcat dubbo-admin instance skills
1. Download the tomcat image docker pull tomcat:8...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...
When should a website place ads?
I recently discussed "advertising" with...
960 Grid System Basic Principles and Usage
Of course, there are many people who hold the oppo...
How to install MySQL 5.7.17 and set the encoding to utf8 in Windows
download MySQL official download, select Windows ...
JavaScript event capture bubbling and capture details
Table of contents 1. Event Flow 1. Concept 2. DOM...
Steps to package and release the Vue project
Table of contents 1. Transition from development ...
Summary of Mysql common benchmark commands
mysqlslap Common parameter description –auto-gene...
Five ways to implement inheritance in js
Borrowing Constructors The basic idea of this t...
Detailed code for building a multi-person video chat service based on webrtc on Ubuntu
WebRTC, which stands for Web Real-Time Communicat...
Use the Linux seq command to generate a sequence of numbers (recommended)
The Linux seq command can generate lists of numbe...
MySQL 8.0 user and role management principles and usage details
This article describes MySQL 8.0 user and role ma...
Linux redis-Sentinel configuration details
download Download address: https://redis.io/downl...
Use JS to zoom in and out when you put the mouse on the image
Use JS to zoom in and out when the mouse is on th...