How to style table with only vertical cell spacing?

Question

I have a table in my HTML yet I only want vertical spacing as it doesn't look right with the 25px horizontally. I can see no attribute in HTML to do this so is it possible?
Thanks in Advance,
Dean

EDIT: I have a table with cellspacing all the way around of 25px. I would only like vertical cellspacing of 25px.

I do not understand. Can you rephrase? – Pekka Aug 12 '10 at 10:30 — Pekka, Aug 12 '10 at 10:30
See my edit, I hope this has made it more understandable. – Dean Aug 12 '10 at 10:45 — Dean, Aug 12 '10 at 10:45

score 5 · Accepted Answer · answered Aug 12 '10 at 10:37

the cellpadding attribute, which I assume you're talking about, will only take a number and use it as pixels between the cell wall and content. You'll have to come up with a workaround, depending on your layout you may want to use a <div> instead, or if there aren't any borders around the cells you can add style='padding-bottom:25px' to it to create the same effect.

score 3 · Answer 2 · answered Aug 12 '10 at 10:35

3

Just add this in the < head > section, just after the head tag opening of your page: This should do the work:

<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25 
px on top and bottom, zero px on left and right */
</style>

answered Aug 12 '10 at 10:35

iamserious

5,385
12
41
60

score 1 · Answer 3 · answered Sep 24 '20 at 09:55

Cleaner <table> element solution (useful for in-lining styles).

table {
  border-collapse: separate;
  border-spacing: 0 20px;
}

th {
  background-color: blue;
  color: white;
}

th, td {
  width: 150px;
  border: 1px solid black;
  padding: 5px;
}

<table>
  <tbody>
    <tr>
      <th>Vehicle     <th>No. of Wheels  <th>Rep (0-10)
    <tr>
      <td>Skateboard  <td>4              <td>7
    <tr>
      <td>BMX         <td>2              <td>6
    <tr>
      <td>Unicycle    <td>1              <td>-1

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

I discovered this:

border-bottom: 25px solid transparent;

Be aware that IE6 has a problem with transparency.

edited May 23 '17 at 12:10

Community

1
1

answered May 29 '12 at 04:20

javic

823
1
6
9

How to style table with only vertical cell spacing?

4 Answers4