Блог

У меня есть таблица с 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>
 

Я хочу поместить пробел между разделами. то есть, только перед первым и после последнего td набора столбцов, который он составляет. Я пытался использовать свойство borders-spacing и margin, но это не помогло.

Попробуйте создать пустые <th> поля before first и after last <th> и задайте border: none свойство и диапазон ширины, как вы ожидаете.

<th style="border: none; width: 100px;"></th> .