Add slashes to html tables, use css to add slashes to table header cells

Background: The business has given 90+ word spreadsheets, which need to be designed in html.

 

As shown in the picture, how to implement the downward slash in the red area?

Let me talk about the conclusion first: the table in html does not have a direct slash header tag, but it can be realized by combining css, svg and the like.

 

#lineTd{

background:#FFFFFF url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;

}

Or write directly in the cell style:

<td style="background:#FFFFFF url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;">

in:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2 U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=

It is the base64 encrypted code, and the decryption is as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>

The black in the code is the color, and it supports hexadecimal color coding. After modifying the color, re-encrypt it with base64 and replace the original encryption code. After the modification, you can come here to encrypt and decrypt:  Base64 online encoding and decoding | Base64 encryption and decryption - Base64.us

Add this class style to the td that you want to add a slash to.

<table style="border-collapse:collapse;" cellspacing="0" cellpadding="0">

    <tbody>

       <tr>

           <td id="lineTd">

              <span style="float:left;margin-top:20px;">项目</span>

              <span style="float:right;margin-top:-10px;">日期</span>

           </td>

           <td>2010-10-15</td>

       </tr>

       <tr>

           <td>采购</td>

           <td>9000元</td>

       </tr>

    </tbody>

</table>