"如何使用 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>