Spacing between thead and tbody

前端 未结 7 1015
情话喂你
情话喂你 2020-12-02 19:23

I have a simple html table like this:


  <         
7条回答
  •  无人及你
    2020-12-02 20:12

    This worked for me on Chrome (for other browsers I don't know).

    .theTargethead::after
    {
        content: "";
        display: block;
        height: 1.5em;
        width: 100%;
        background: white;
    }
    

    Such css code creates an empty white space between the thead and the tbody of the table. If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.

    Also using the "-" sign in the row content : "-"; instead of the empty string "" can create problems when exporting the printed pages to file, i.e. pdf. Of course this is parser/exporter dependent. Such exported file opened with a pdf editor (for ex.: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) could still contain the minus sign. The empty string doesn't have the same issue. No problems in both cases if the printed html table is exported as image: nothing is rendered.

    I didn't notice any issue even using

    content : "\200C";
    

提交回复
热议问题
Column 1Column 2