CODEWITHSUNDEEP
htmlcsswordpress
Michelle
Michelle

Reputation: 549

html change table row height

I have a table I've created and I want to minimize the size of each row so that there's no white space under the first 3 lines - "Stunning luxury flower bouquets" etc. and also no white space under "ORDER BEFORE 12PM FOR NEXT DAY DELIVERY"

Can someone please tell me how to do this? I also want to move the table so that it starts where the logo is. How do I do this as well please?

You can view the table here - https://ffe-dev.flowersforeveryone.co.za/sea-point/

The code is - 

table,
th,
td,
tr {
  border: 1px solid black;
}

h1 {
  font-size: 22px;
}
<html>

<head>
  <div class="text1">
    <table class="table_seapoint">
      <tr>
        <td rowspan="10"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="250" height="219" /> :</td>
        <td colspan="4">
          <h1 style="font-weight:lighter">STUNNING LUXUARY FLOWER BOUQUETS</h1>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">FRESHLY CUT AND HAND DELIVERED</h1>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">IN SEA POINT AND ACROSS THE WESTERN CAPE</h1>
        </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="valign size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">BEST PRICE PROMISE </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">100% MONEY BACK GUARANTEE</td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">QUICK AND EASY ONLINE ORDERING </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">24/7 CUSTOMER SUPPORT</td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">HAPPINESS ASSURED</td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
        </td>
      </tr>
      <tr>
        <td valign="top"> <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4385" /> </td>
        <td valign="top" nowrap style="padding-left: 10px;">
          <B> 079 885 9609 </B>
        </td>
        <td valign="top" style="padding-left: 30px;"> <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4386" /></td>
        <td valign="top" style="padding-left: 10px;"><b> [email protected] </b></td>
      </tr>
    </table>
</head>

</div>

<body>
  [recent_products per_page="3" columns="3" orderby="title" order="ASC" paginate="true" category="featured" width=300px]
</body>

</html>

(I'm going to get rid of the border once I get this thing right)

Upvotes: 0

Views: 87

Answers (5)

sumeshsn1
sumeshsn1

Reputation: 868

remove the margin-bottom of h1 tags. hope this helps :)

Upvotes: 1

Harmenx
Harmenx

Reputation: 946

You need to remove "margin-bottom" for the first three lines.

table.table_seapoint h1 {
    margin-bottom: 0px;
}

Upvotes: 1

Manikandan2811
Manikandan2811

Reputation: 841

The lsx.css file having space for head tags.. so u can add this css code..

css

.content-area h1, 
.content-area h2, 
.content-area h3, 
.content-area h4, 
.content-area h5, 
.content-area h6, 
.content-area .widget-title, 
.widget-area h1, .widget-area h2, 
.widget-area h3, .widget-area h4, 
.widget-area h5, .widget-area h6, 
.widget-area .widget-title {
 margin-bottom:0px;
}

Upvotes: 0

SHUBHAM SINGH
SHUBHAM SINGH

Reputation: 377

Add this css 

td h1 {
    margin-bottom: 0px !important;
}

//start from top just below the logo

div#primary {
    margin-top: 0px !important;
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Remove margin-bottom for H1

.widget-area h1 {
  font-size: 22px;
  margin-bottom:0;
}

Upvotes: 1

Related Questions