css - HTML 表格中的对 Angular 线 - 电子邮件签名-6ren

css - HTML 表格中的对 Angular 线 - 电子邮件签名

转载作者：行者123 更新时间：2023-11-28 12:11:15

我需要在我的 HTML 签名中有一个表格布局，但需要对 Angular 线。我知道这需要内联 CSS，但是是否可以选择内联使用伪元素？

我有一个表格中的对 Angular 线示例 - 但不确定如何将其合并到 HTML 电子邮件签名中。

有什么想法吗？

* {
	margin: 0;
	padding: 0;
}
body {
  background: #FFF;
}
table {
  border-collapse: collapse;
  margin: 50px 0 0 50px;
  border-top: solid 1px #000;
  position: relative;
}

/* Very top border */
table:before {
  content: '';
  display: block;
  position: absolute;
  top: -20px;
  left: 120px;
  height: 20px;
  width: 240px;
  border: solid 1px #000;
  border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
table:after { 
  content: '';
  display: block;
  position: absolute;
  border-top: solid 1px #000;
  width: 101px;
  right: -101px;
  top: 0;
}

/* 
 - Apply header background/font colour 
 - Set base z-index for IE 9 - 10
*/
thead, th:before {
  background: #03a9f4;
  color: #FFF;
  z-index: 1;
}

/* min-width and max-width together act like a width */
th {
	min-width: 60px;
	max-width: 60px;
	position: relative;
	height: 100px;
}

/* Pseudo element borders */
th:before {
	content: '';
	display: block;
	position: absolute;
    top: 0;
    right: -50px;
	height: 100px;
	width: 60px;
	border: solid 1px #000;
	border-right: none;
    border-top: none;
	transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
thead th:last-child:before {
	border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
tbody tr:first-child td {
  border-top: solid 1px #000;
}

/* 
 - Rotate and position headings
 - Padding centers the text vertically and does the job of height
 - z-index ensures that the text appears over the background color in IE 9 - 10
*/
th span {
transform: rotate(-45deg);
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: -70px;
  bottom: 29px;
  height: 0;
  padding: 0.75em 0 1.85em;
  width: 100px;
  z-index: 2;
}


/* Create first two th styles */
th:nth-child(1),th:nth-child(2)  {
  border: solid 1px #000;
  border-top: none;
  border-bottom: none;
}
th:nth-child(2) {
	border-right: none;
}
th:nth-child(1):before,
th:nth-child(2):before  {
	display: none;	
}

td {
	border: solid 1px #000;
	border-bottom: none;
	border-top: none;
	height: 20px;
	text-align: center;
}

tfoot { 
	border: solid 1px #000;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
		<thead>
			<tr>
			  <th>One</th>
			  <th>Two</th>
              <th><span>Three</span></th>
			  <th><span>Four</span></th>
              <th><span>Five</span></th>
              <th><span>Six</span></th>
              <th><span>Seven</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
			<tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
          <tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
          <tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
          <tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
          <tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
          <tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
			
		</tbody>
		<tfoot>
			<tr>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
			  <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

最佳答案

is there an option to use pseudo elements inline

没有。内联样式属性可以将 CSS 应用于给定元素。它们完全取代了选择器。

关于css - HTML 表格中的对 Angular 线 - 电子邮件签名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31188653/

全站热门文章

首页

博学

6Ren·AI

商城

css - HTML 表格中的对 Angular 线 - 电子邮件签名