Search code examples
htmlwordpressdrop-down-menuhtml-tablecontact-form-7

contactform7 table styling problems


Here is the link of the contact form. http://wallflowerstaffing.com/join-us/

As you can see, there is a thin line between each row and I've tried a lot of ways such as<table rules=none>,table{border-collapse: collapse; border:0;} but none of them worked. Is there any way that I can remove all the lines? I am going to fit the form to a colored background and those lines are really annoying.

Besides, there are some drop-down menus, but the drop-down menu on the left pushes the other one to the right edge of the page and I tried changing the width of the menu <td width="300"> but it didn't work.

I'd really appreciate your help.

Below is the contact form code.

 <tr>
       <td width="300" height="80"><label>Gender
        [select gender "Male" "Female"]</label><td>
       <td width="300" height="80"><label>Fluent Language
        [select language "English" "Spanish" "French" "German" "Italian" "Russian"]</label><td>
</tr>

<tr>
       <td width="300" height="80"><label>Special Talent
        [select Talent "Actor" "Dancer" "Model" "Musician" "Artist" "DJ" "Photographer" "Mixologist" "Make Up Artist" "Other"]</label><td>
       <td  width="300" ><label> Link to your website on social media
       [url url-389] </label></td>


Solution

  • The border top is being applied to your .entry-content tr td.

    So try this:

    .entry-content tr td {
        border-top: none;
    }
    

    Regarding your second issue, you should be able to remove the extra <td></td> in those rows and it will render correctly.