CODEWITHSUNDEEP
htmlcsscss-tables
Jermaine Subia
Jermaine Subia

Reputation: 796

CSS - How to Add Lines Between Just the Columns in a Table

I am trying to get my right border to go straight down the table column as in the image below:

Pic 1

Mine looks like this:

Pic 2

If you look closely the line does not go all the way down to the bottom and it looks scattered towards the bottom.

Here is my 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>

Here is my 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;
}

UPDATE 1

I added the border colapse property and it did get rid of the spacing, however, the line is still not going all the way to the bottom see image below:

Pic 3

UPDATE 2

With help it looks like the image below (see the first row not the second row). The words are more spread out from eachother and the spacing on the bottom is gone as it supposed to look like in the first image.

Pic 4

Upvotes: 0

Views: 1373

Answers (3)

Matthew Moore
Matthew Moore

Reputation: 866

See my code below - I've added comments to the 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>

Upvotes: 1

Window
Window

Reputation: 1437

I would change how you are formatting your table. Instead of putting everything in a single table, try nesting a table for each fruit inside of your table.

Here is an example:

<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>

And then, for your CSS, get rid of this:

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

because you won't need the borders on every <td>, just the <td> that contains the nested <table>.

Upvotes: 1

Puschi
Puschi

Reputation: 249

You can try this:

table {
    border-collapse: collapse;
}

With this border-spacing and empty-cells properties have no effect

Upvotes: 1

Related Questions