【问题标题】:border-spacing of table td between sections only仅部分之间的表 td 的边框间距
【发布时间】:2021-04-06 02:48:00
【问题描述】:

我有一个包含 3 个部分的表格:- 艺术品、条形码和文本区域,其标题如下:-

         <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col" colSpan={7}>Artwork Area</th>
                <th scope="col" colSpan={8}>Barcode Area</th>
                <th scope="col" colSpan={8}>Plain Text Area</th>
                <th scope="col"></th>
            </tr>
            <tr className='custom-tr'>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">X</th>
                <th scope="col">Y</th>
                <th scope="col">Rotate</th>
                <th scope="col">Scale</th>
                <th scope="col" className='same'>Flip</th>
                <th scope="col" className='same'>Flop</th>
                <th scope="col">Text</th>
                <th scope="col">X</th>
                <th scope="col">Y</th>
                <th scope="col">Rotate</th>
                <th scope="col">Scale</th>
                <th scope="col" className='same'>Flip</th>
                <th scope="col" className='same'>Flop</th>
                <th scope="col" className='same'>External</th>
                <th scope="col">Text</th>
                <th scope="col">Type</th>
                <th scope="col">X</th>
                <th scope="col">Y</th>
                <th scope="col">Rotate</th>
                <th scope="col">Scale</th>
                <th scope="col" className='same'>Flip</th>
                <th scope="col" className='same'>Flop</th>
                <th scope="col"></th>
            </tr>
        </thead>

我想在部分之间放置一个空格。即,仅在它构成的 cols 集合的第一个和最后一个 td 之前和之后。我尝试使用边框间距和边距属性,但没有帮助。

【问题讨论】:

    标签: html css html-table css-selectors


    【解决方案1】:

    尝试在第一个和最后一个&lt;th&gt; 之前和之后创建一个空的&lt;th&gt;,并按照您的预期设置border: none 属性和宽度范围。

    &lt;th style="border: none; width: 100px;"&gt;&lt;/th&gt;.

    【讨论】: