CODEWITHSUNDEEP
htmlcss
NaderBesada
NaderBesada

Reputation: 83

CSS Table input

I have two buttons that I need to be the same width in my table but one is bigger than the other. They were both the same width but I think I changed something and I can't bring it back

body.products table {
  table-layout: fixed;
}

body.products input.add[type="button"] {
  color: white;
  width: 100%;
  background-color: #27af60;
  border: none;
  letter-spacing: .8px;
}

body.products input.del[type="button"] {
  color: white;
  width: 100%;
  background-color: #c0392b;
  border: none;
  letter-spacing: .8px;
}

body.products input.submit[type="submit"] {
  color: white;
  width: 100%;
  background-color: gray;
  border: none;
  letter-spacing: .8px;
}
<!DOCTYPE html>
<html>

<body class="products">
  <form action="addtable.php" method="GET">
    <table>
      <tr>
        <td colspan="2">
          <input class="add" type="button" value="Add a Product">
        </td>
        <td colspan="2">
          <input class="del" type="button" value="Delete a Product">
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <input class="submit" name="prod_submit" type="submit" value="Submit Products">
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

Upvotes: 0

Views: 2500

Answers (3)

Rhumborl
Rhumborl

Reputation: 16609

You need to set the width of the tds to 50% each, otherwise they will naturally size to their content and Delete will be bigger than Add. You can do this by adding the following CSS:

body.products table tr:first-child > td {
  width:50%;
}


body.products table {
  table-layout: fixed;
}

body.products table tr:first-child > td {
  width:50%;
}

body.products input.add[type="button"] {
  color: white;
  width: 100%;
  background-color: #27af60;
  border: none;
  letter-spacing: .8px;
}

body.products input.del[type="button"] {
  color: white;
  width: 100%;
  background-color: #c0392b;
  border: none;
  letter-spacing: .8px;
}

body.products input.submit[type="submit"] {
  color: white;
  width: 100%;
  background-color: gray;
  border: none;
  letter-spacing: .8px;
}
<!DOCTYPE html>
<html>

<body class="products">
  <form action="addtable.php" method="GET">
    <table>
      <tr>
        <td colspan="2">
          <input class="add" type="button" value="Add a Product">
        </td>
        <td colspan="2">
          <input class="del" type="button" value="Delete a Product">
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <input class="submit" name="prod_submit" type="submit" value="Submit Products">
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

Upvotes: 0

J. Nilles
J. Nilles

Reputation: 87

You may have removed the class from the body in your html. You could add it back in and it looks like it would work or you could add the products class to your table and change your CSS a bit. Assuming you want the Submit button to be as wide as the other two.





   table.products {
    table-layout: fixed;
    }    

    table.products input.add[type="button"]{

    color:white;
    width: 100%;
    background-color: #27af60;
    border: none;
    letter-spacing: .8px;

    }

    table.products input.del[type="button"]{

    color:white;
    width: 100%;
    background-color: #c0392b;
    border: none;
    letter-spacing: .8px;
    }

    table.products input.submit[type="submit"]{

    color:white;
    width: 100%;
    background-color: gray;
    border: none;
    letter-spacing: .8px;
    }


<table class="products">  
    <tr>
        <td colspan="2"><input class="add" type="button" value="Add a Product"></td>
        <td colspan="2"><input class="del" type="button" value="Delete a Product"></td>
    </tr>
    <tr>
        <td colspan="4"><input class="submit" name="prod_submit" type="submit" value="Submit Products"></td>
    </tr>

</table>

Upvotes: 0

Nitin Garg
Nitin Garg

Reputation: 896

Along with table-layout:fixed, you will have to add width as well for example width:300px;

table{
table-layout: fixed;
width:300px;
}    

input.add[type="button"]{

color:white;
width: 100%;
background-color: #27af60;
border: none;
letter-spacing: .8px;

}

input.del[type="button"]{

color:white;
width: 100%;
background-color: #c0392b;
border: none;
letter-spacing: .8px;
}

input.submit[type="submit"]{

color:white;
width: 100%;
background-color: gray;
border: none;
letter-spacing: .8px;
}
 <table>  
        <tr>
            <td colspan="2" ><input class="add" type="button" value="Add a Product"></td>
            <td colspan="2" ><input class="del" type="button" value="Delete a Product"></td>
        </tr>
        <tr>
            <td colspan="4"><input class="submit" name="prod_submit" type="submit" value="Submit Products"></td>
        </tr>

    </table>

Upvotes: 1

Related Questions