Как полностью удалить границы таблицы HTML? - PullRequest
Новая
       36

Как полностью удалить границы таблицы HTML?

0 голосов
/ 11 декабря 2018

Я читал другие ответы на эту тему, но после нескольких часов попыток - я все еще не могу найти решение.

У меня есть веб-сайт, о котором я позабочусь, и мне нужны ячейки взаголовок таблицы HTML должен быть без полей.

Веб-сайт - http://vcollection.com, и таблица, с которой у меня возникают трудности, выглядит следующим образом: http://prntscr.com/ltb9o9

Вы можете увидеть мои стили наснимок экрана, но, тем не менее, я не могу избавиться от границы: http://prntscr.com/ltbb19

Интересно, что при уменьшении ширины таблицы на 1px проблема, кажется, сохраняется даже при ширине пикселя (т.е. 962px, 960px, 958px ...), но отсутствует при нечетной ширине пикселя (963px, 961px, 959px и т. Д.)

Я пытался воспроизвести его, но, похоже, не могу: 

.linear-background-header {
	background-image: linear-gradient(#454545, black);
	border: 0;
	background-color: transparent;
}
.main-header-section {
	display: inline-block;
}
span.header-font {
    font-family: Century Gothic;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #999999;
}
<table border="0" cellspacing="0" cellpadding="0" style="background-color:transparent; margin-top:-25px; width:963px; border-collapse: collapse; border: 0; border-spacing: 0">
			<thead>
            <tr style="background-image: linear-gradient(#454545, black)">
                <th class="linear-background-header">
                    <div class="main-header-section">
                        <span class="header-font">New Products</span>
                    </div>
                </th>
                <th class="linear-background-header" style="padding: 0; line-height: 0">
                    <img src="https://vcollection.com/assets/images/separator.png" style="height: 36px; cursor: auto;">
                </th>
                <th class="linear-background-header">
                    <div class="main-header-section">
                        <span class="header-font">Car Mat Configurator</span>
                    </div>
                </th>
                <th class="linear-background-header" style="padding: 0; line-height: 0">
                    <img src="https://vcollection.com/assets/images/separator.png" style="height: 36px; cursor: auto;">
                </th>
                <th class="linear-background-header">
                    <div class="main-header-section">
                        <span class="header-font">Follow Us On Social Media</span>
                    </div>
                </th>
            </tr>
				</thead>
				<br>
			<tr height="5px"></tr>
		<tr >
			<td class="newprodwid" style="width:324px" >dummy
			</td>
			<td width="15px"></td>
			<td class="newprodwid"  style="width:340px">dummy
			</td>
			<td width="15px"></td>
			<td style="width:278px" >
				dummy
			 </td></tr>
		</table>

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Я понял, что это проблема Chrome .Все остальные браузеры работают нормально, но Chrome иногда ведет себя так, в зависимости от разрешения экрана.

0 голосов
/ 11 декабря 2018

Это требует немного CSS.Если вы используете тег <style> или файл CSS, просто используйте 

table * {
    border: none;
}
...