mirror of
https://github.com/servo/servo.git
synced 2025-06-16 12:24:29 +00:00
48299a53cb
Known issues: * Collapsed borders do not correctly affect the border-box of the table itself. * The content widths of all cells in a column and the content height of all cells in a row is the same in this patch, but not in Gecko and WebKit. * Corners are not painted well. The spec does not say what to do here. * Column spans are not handled well. The spec does not say what to do here either.
136 lines
2.1 KiB
HTML
136 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
border-style: solid;
|
|
border-color: black;
|
|
position: absolute;
|
|
}
|
|
|
|
#c00 {
|
|
border-width: 4px 2px 2px 4px;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 82px;
|
|
height: 82px;
|
|
}
|
|
#c01 {
|
|
border-width: 4px 2px 0 0;
|
|
left: 82px;
|
|
top: 0px;
|
|
width: 94px;
|
|
height: 66px;
|
|
}
|
|
#c02 {
|
|
border-width: 4px 4px 0 0;
|
|
left: 176px;
|
|
top: 0px;
|
|
width: 82px;
|
|
height: 79px;
|
|
}
|
|
|
|
#c10 {
|
|
border-width: 0 0 2px 4px;
|
|
left: 0px;
|
|
top: 82px;
|
|
width: 66px;
|
|
height: 94px;
|
|
}
|
|
#c11 {
|
|
border-width: 30px;
|
|
left: 66px;
|
|
top: 66px;
|
|
width: 124px;
|
|
height: 124px;
|
|
}
|
|
#c12 {
|
|
border-width: 4px 4px 4px 0;
|
|
left: 190px;
|
|
top: 79px;
|
|
width: 68px;
|
|
height: 98px;
|
|
}
|
|
|
|
#c20 {
|
|
border-width: 0 2px 2px 4px;
|
|
left: 0px;
|
|
top: 176px;
|
|
width: 82px;
|
|
height: 80px;
|
|
}
|
|
#c21 {
|
|
border-width: 0 2px 2px 0;
|
|
left: 82px;
|
|
top: 190px;
|
|
width: 94px;
|
|
height: 66px;
|
|
}
|
|
#c22 {
|
|
border-width: 0 4px 2px 0;
|
|
left: 176px;
|
|
top: 177px;
|
|
width: 82px;
|
|
height: 79px;
|
|
}
|
|
|
|
#c30 {
|
|
border-width: 0 2px 2px 4px;
|
|
left: 0px;
|
|
top: 256px;
|
|
width: 82px;
|
|
height: 66px;
|
|
}
|
|
#c31 {
|
|
border-width: 0 2px 2px 0;
|
|
left: 82px;
|
|
top: 256px;
|
|
width: 94px;
|
|
height: 66px;
|
|
}
|
|
#c32 {
|
|
border-width: 0 4px 2px 0;
|
|
left: 176px;
|
|
top: 256px;
|
|
width: 82px;
|
|
height: 66px;
|
|
}
|
|
|
|
#c40 {
|
|
border-width: 0 2px 4px 4px;
|
|
left: 0px;
|
|
top: 322px;
|
|
width: 82px;
|
|
height: 68px;
|
|
}
|
|
#c41 {
|
|
border-width: 0 2px 4px 0;
|
|
left: 82px;
|
|
top: 322px;
|
|
width: 94px;
|
|
height: 68px;
|
|
}
|
|
#c42 {
|
|
border-width: 0 4px 4px 0;
|
|
left: 176px;
|
|
top: 322px;
|
|
width: 82px;
|
|
height: 68px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id=c00></div><div id=c01></div><div id=c02></div>
|
|
<div id=c10></div><div id=c11></div><div id=c12></div>
|
|
<div id=c20></div><div id=c21></div><div id=c22></div>
|
|
<div id=c30></div><div id=c31></div><div id=c32></div>
|
|
<div id=c40></div><div id=c41></div><div id=c42></div>
|
|
</body>
|
|
</html>
|
|
|