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
Detailed explanation of the correct way to configure SSL (https certificate) in Apache on Ubuntu
First, take a look at Alibaba Cloud's officia...
How to choose the right MySQL datetime type to store your time
When building a database and writing a program, i...
Sample code using scss in uni-app
Pitfalls encountered I spent the whole afternoon ...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
Centos7 installation and configuration of Mysql5.7
Step 1: Get the MySQL YUM source Go to the MySQL ...
How to implement controllable dotted line with CSS
Preface Using css to generate dotted lines is a p...
How to implement web stress testing through Apache Bench
1. Introduction to Apache Bench ApacheBench is a ...
Use a few interview questions to look at the JavaScript execution mechanism
Table of contents Previous words Synchronous and ...
Example code for changing the style of other tags by hovering the mouse using CSS
Preface: As far as I know, currently CSS can only...
Detailed explanation of firewall rule settings and commands (whitelist settings)
1. Set firewall rules Example 1: Expose port 8080...
Simple steps to write custom instructions in Vue3.0
Preface Vue provides a wealth of built-in directi...
How to implement Mysql switching data storage directory
How to implement Mysql switching data storage dir...
Detailed analysis of the chmod command to modify file permissions under Linux
Use the Linux chmod command to control who can ac...
Docker batch start and close all containers
In Docker Start all container commands docker sta...
Vue uses ECharts to implement line charts and pie charts
When developing a backend management project, it ...