CSS - Как добавить строки между столбцами в таблице - PullRequest
Новая
       32

CSS - Как добавить строки между столбцами в таблице

0 голосов
/ 12 июня 2018

Я пытаюсь заставить мою правую границу идти вниз по столбцу таблицы, как показано на рисунке ниже:

Pic 1

Шахта выглядит так:

Pic 2

Если вы присмотритесь, линия не спустится до самого дна и будет разбросана вниз.

Вот мой HTML: 

<div class="Popular">
<table>
<tr>
<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
<td><h4>$2.59</h4></td>
<td><h4>$1.90</h4></td>
<td><h4>$2.59lb</h4></td>
<td><h4>$6.29</h4></td>
<td><h4>$0.99</h4></td>
</tr>
<tr>
<td>Banana</td>
<td>Avocado</td>
<td>Full Apple</td>
<td>Yellow Onion</td>
<td>Strawberries</td>
<td>Large Lemon</td>
</tr>
<tr>
<td>-0.41lbs</td>
<td>each</td>
<td>-0.5lbs</td>
<td>n/a</td>
<td>16Oz</td>
<td>each</td>
</tr>
</table>
</div>

Вот мой CSS: 

.Popular{
background:white;
height:350px;
width:80%;
margin:0 0 0 100px;
}
.Popular td{
border-right:1px solid gray;
}

.Popular ul{
margin:0;
}
.Popular li{
list-style:none;
}
.Popular h4{
margin:0;
}
.column2{
border-right:1px solid gray;
padding:5px 10px;
}

ОБНОВЛЕНИЕ 1

Я добавил свойство пограничного коллапса, и оно действительно избавилось отМежду тем, расстояние все еще не доходит до конца, см. изображение ниже:

Pic 3

ОБНОВЛЕНИЕ 2

ССправка это выглядит как на рисунке ниже (см. первый ряд, а не второй ряд).Слова больше разбросаны друг от друга, а расстояние снизу пропало, как должно было выглядеть на первом изображении.

Pic 4

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Я бы изменил способ форматирования таблицы.Вместо того, чтобы помещать все в одну таблицу, попробуйте вложить таблицу для каждого фрукта в вашей таблице.

Вот пример: 

<table>
    <tr>
        <td class="column2">
            <table>
                <tr>
                    <td><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
                </tr>
                <tr>
                    <td><h4>$0.45</h4></td>
                </tr>
                <tr>
                    <td>Banana</td>
                </tr>
                <tr>
                    <td>-0.41lbs</td>
                </tr>
            </table>
        </td>
        // Other products would follow the same convention
    </tr>
</table>

А затем, для вашего CSS, избавьтесьиз этого: 

.Popular td {
    border-right:1px solid gray;
}

, потому что вам не понадобятся границы для каждого <td>, только <td>, который содержит вложенный <table>.

0 голосов
/ 12 июня 2018

См. Мой код ниже - я добавил комментарии к CSS. 

.Popular {
	width: 80%;
	margin-left: 100px;
	overflow: auto;
}

/* Collapse the border, to prevent gaps between the table rows/cells */
.Popular table {
	border-collapse: collapse;
}

/* Add 1 em padding to left/right of all cells (of all rows after the first, to not mess with the images) */
.Popular tr + tr td {
	padding: 0 1em;
}

/* Add 3em of padding to the bottom of all table cells, in the last table row; this replaces setting a height on the parent container - to simulate height */
.Popular tr:last-child td {
	padding-bottom: 3em;
}

.Popular td {
	margin: 0;
	border-right: 1px solid gray;
}

.Popular ul {
	margin:0;
}

.Popular li {
	list-style:none;
}

.Popular h4 {
	margin:0;
}

.column2 {
	border-right:1px solid gray;
	padding:5px 10px;
}
<div class="Popular">
	<table>
		<tr>
			<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
			<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
			<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
			<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
			<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
			<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
		</tr>
		<tr>
			<td><h4>$0.45</h4></td>
			<td><h4>$2.59</h4></td>
			<td><h4>$1.90</h4></td>
			<td><h4>$2.59lb</h4></td>
			<td><h4>$6.29</h4></td>
			<td><h4>$0.99</h4></td>
		</tr>
		<tr>
			<td>Banana</td>
			<td>Avocado</td>
			<td>Full Apple</td>
			<td>Yellow Onion</td>
			<td>Strawberries</td>
			<td>Large Lemon</td>
		</tr>
		<tr>
			<td>-0.41lbs</td>
			<td>each</td>
			<td>-0.5lbs</td>
			<td>n/a</td>
			<td>16Oz</td>
			<td>each</td>
		</tr>
	</table>
</div>
0 голосов
/ 12 июня 2018

Вы можете попробовать это: 

table {
    border-collapse: collapse;
}

При этом свойства межстрочного интервала и пустых ячеек не действуют

...