"如何使用 CSS 在 HTML 中创建相同的表格？"

Question

表格图像<\/a>

我正在创建与图像中所示相同的第一个头部标签。 谢谢！

Answer 1

@费詹！

要实现这种设计，您必须“旋转 90 度”<\/strong> 。 从这里<\/a>看一些演示

并且要像天使一样为您的图像添加边框，您可以在您的第一个 td 和此类中添加一个类，并将 background-image 设置为您的自定义箭头。

.table td.first-child {
   border-right: 0px;
   /*your custom image*/
   background: URL("yourline.png");
   width: 20%; /*if you want it to be taller*/
}

Answer 2

这应该给你一个粗略的想法

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { position:relative; border: 1px solid #dddddd; padding: 8px; height:200px; writing-mode: vertical-rl; text-orientation: mixed; } tr td:first-child{ width:250px; } tr th:first-child{ width:250px; writing-mode: horizontal-tb; } .t1{ position:absolute; bottom:5px;left:5px; } .t2{ position:absolute; top:5px;right:5px; } tr:nth-child(even) { background-color: #eee; } .diagonal { background: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); }

 <table> <tr> <th class='diagonal'> <div class='t1'>Title 1</div> <div class='t2'>Title 2</div> </th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>