CSS Table input

Question

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>

Are you trying to get Add a Product and Delete a Product to be the same width or the submit button to be as wide as both of them? — J. Nilles
– J. Nilles, Commented Feb 20, 2016 at 18:32
the submit is fine it takes up 4 cols and has a width of 100% but the add and delete are not the same width. When i inspect element the add td has a bigger width than the delete — NaderBesada
– NaderBesada, Commented Feb 20, 2016 at 18:34
Ahh. Then "Delete a Product" is taking up more room because its content (the text Delete a Product) is longer than the contents of "Add a Product". You will need to make the table size larger than twice what would be the minimum width of "Delete a Product". Nitin Garg's suggestion of 300px is probably good. But it might change if you change your text size. — J. Nilles
– J. Nilles, Commented Feb 20, 2016 at 18:46

Nitin Garg · Accepted Answer · 2016-02-20 18:36:58Z

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>

J. Nilles · Accepted Answer · 2016-02-20 18:40:07Z

0

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>

answered Feb 20, 2016 at 18:40

J. Nilles

875 bronze badges

1 Comment

Rhumborl Over a year ago

i had edited the question to add the relevant body tag in and demonstrate the issue as a runnable snippet, but it got edited back out. I have re-added the snippet so the body tag has the appropriate class and you can see how the behaviour the OP is describing.

Rhumborl · Accepted Answer · 2016-02-20 18:40:21Z

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>

Collectives™ on Stack Overflow

CSS Table input

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related